:root{
  --ink-green:#07130F;
  --night-blue:#0C1B33;
  --stand-slate:#16241F;
  --paper:#F2F5EC;
  --lime:#C9FF3D;
  --lime-dim:#8FBF2E;
  --brick:#D2543C;
  --chalk:#9AA8A0;

  --line:rgba(242,245,236,.14);
  --line-strong:rgba(242,245,236,.3);
  --lime-line:rgba(201,255,61,.45);

  --bar-h:56px;
  --rail-w:72px;
  --max:1280px;
  --radius:2px;

  --shadow-soft:0 2px 12px rgba(0,0,0,.35);
  --ease:cubic-bezier(.22,1,.36,1);

  --mono:"JetBrains Mono","Sarasa Mono SC","IBM Plex Mono",ui-monospace,Consolas,"Courier New",monospace;
  --sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

body{
  margin:0;
  padding-top:var(--bar-h);
  padding-left:0;
  background:var(--ink-green);
  color:var(--paper);
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  line-height:1.75;
  letter-spacing:.012em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4,p,figure,ul,ol,dl{margin:0;}
ul,ol{padding:0;list-style:none;}
img,svg,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
::selection{background:var(--lime);color:var(--ink-green);}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;}

/* ---------- 版心与网格 ---------- */
.container{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:clamp(16px,4vw,40px);
}
.section{padding-block:clamp(44px,7vw,96px);}
.section--tight{padding-block:clamp(24px,3.5vw,48px);}

.section-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:12px 24px;
  margin-bottom:clamp(20px,3vw,36px);
}
.section-head__title{
  font-size:clamp(24px,3vw,44px);
  font-weight:800;
  line-height:.95;
  letter-spacing:-.02em;
}
.section-head__index{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--lime);
}

.grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.col-4,.col-8,.col-12{grid-column:span 4;}
.col-6{grid-column:span 2;}

/* ---------- 跳到主内容 ---------- */
.skip-link{
  position:fixed;
  top:10px;
  left:10px;
  z-index:300;
  display:inline-block;
  padding:10px 16px;
  background:var(--lime);
  color:var(--ink-green);
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  border-radius:var(--radius);
  transform:translateY(-240%);
  transition:transform 200ms var(--ease);
}
.skip-link:focus,.skip-link:focus-visible{transform:translateY(0);}

/* ---------- 头部框架导航 ---------- */
.site-header{position:relative;z-index:95;}

.frame-bar{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  height:var(--bar-h);
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 14px;
  background:rgba(7,19,15,.94);
  border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

.brand{display:inline-flex;align-items:center;gap:10px;min-width:0;}
.brand__mark{
  font-size:17px;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1;
  white-space:nowrap;
  transition:color 180ms var(--ease);
}
.brand__sub{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.2em;
  color:var(--chalk);
  padding-left:10px;
  border-left:1px solid var(--line-strong);
  white-space:nowrap;
}
.brand:hover .brand__mark,.brand:focus-visible .brand__mark{color:var(--lime);}

.bar-index{
  display:none;
  align-items:center;
  gap:8px;
  margin-left:10px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--chalk);
  white-space:nowrap;
}
.bar-index__dot{
  width:6px;
  height:6px;
  flex:0 0 auto;
  background:var(--lime);
  border-radius:50%;
  box-shadow:0 0 0 3px rgba(201,255,61,.16);
}

.bar-actions{margin-left:auto;display:flex;align-items:center;gap:10px;}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:36px;
  padding:8px 16px;
  border:1px solid transparent;
  border-radius:var(--radius);
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  line-height:1;
  white-space:nowrap;
  transition:background-color 180ms var(--ease),color 180ms var(--ease),border-color 180ms var(--ease),transform 180ms var(--ease);
}
.btn--cta{background:var(--lime);color:var(--ink-green);border-color:var(--lime);}
.btn--cta:hover{background:#DCFF7A;border-color:#DCFF7A;transform:translateY(-1px);}
.btn--ghost{background:transparent;color:var(--paper);border-color:var(--line-strong);}
.btn--ghost:hover{color:var(--lime);border-color:var(--lime-line);}

.nav-toggle{
  display:none;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:8px 12px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--paper);
  transition:border-color 180ms var(--ease),color 180ms var(--ease);
}
.nav-toggle:hover,.nav-toggle:focus-visible{border-color:var(--lime-line);color:var(--lime);}
.nav-toggle__label{line-height:1;}
.nav-toggle__glyph{position:relative;display:block;width:14px;height:10px;}
.nav-toggle__glyph::before,.nav-toggle__glyph::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:1px;
  background:var(--lime);
  transition:transform 220ms var(--ease),top 220ms var(--ease);
}
.nav-toggle__glyph::before{top:0;}
.nav-toggle__glyph::after{top:9px;}
.nav-toggle[aria-expanded="true"] .nav-toggle__glyph::before{top:4px;transform:rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle__glyph::after{top:4px;transform:rotate(-45deg);}

.frame-rail{
  position:fixed;
  top:var(--bar-h);
  bottom:0;
  left:0;
  z-index:96;
  display:none;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:var(--rail-w);
  padding:12px 0 14px;
  background-color:var(--night-blue);
  background-image:repeating-linear-gradient(180deg,rgba(242,245,236,.03) 0 1px,transparent 1px 9px);
  border-right:1px solid var(--line);
}
.rail-cap{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.32em;
  color:var(--lime-dim);
  writing-mode:vertical-rl;
  text-orientation:upright;
}
.rail-list{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  width:100%;
  flex:1 1 auto;
  overflow-y:auto;
  padding:6px 0;
  scrollbar-width:thin;
}
.rail-link{
  position:relative;
  display:block;
  padding:9px 0;
  font-size:13px;
  line-height:1.1;
  letter-spacing:.14em;
  color:rgba(242,245,236,.7);
  writing-mode:vertical-rl;
  text-orientation:upright;
  transition:color 180ms var(--ease);
}
.rail-link:hover,.rail-link:focus-visible{color:var(--lime);}
.rail-link[aria-current="page"]{color:var(--lime);}
.rail-link[aria-current="page"]::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:calc(50% - 24px);
  width:2px;
  background:var(--lime);
}
.rail-anchor{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  margin-top:auto;
  width:calc(100% - 14px);
  padding:8px 4px;
  border:1px solid var(--lime-line);
  border-radius:var(--radius);
  font-family:var(--mono);
  font-size:10px;
  line-height:1.2;
  letter-spacing:.02em;
  text-align:center;
  color:var(--lime);
  transition:background-color 180ms var(--ease),transform 180ms var(--ease),border-color 180ms var(--ease);
}
.rail-anchor:hover,.rail-anchor:focus-visible{
  background-color:rgba(201,255,61,.12);
  border-color:var(--lime);
  transform:scale(1.04);
}
.rail-anchor__key{letter-spacing:.02em;}
.rail-anchor__val{font-size:8px;letter-spacing:.1em;color:var(--chalk);}

/* ---------- 页脚看台层 ---------- */
.site-footer{
  background:var(--night-blue);
  border-top:1px solid var(--line);
  padding:clamp(40px,6vw,72px) 0 28px;
  color:var(--paper);
}
.footer-top{
  display:grid;
  grid-template-columns:1fr;
  gap:34px;
}
.footer-brand__mark{
  font-size:clamp(20px,2.4vw,28px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.02em;
}
.footer-brand__line{
  margin-top:10px;
  margin-bottom:18px;
  max-width:26ch;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.6;
  letter-spacing:.04em;
  color:var(--chalk);
}
.footer-stamp{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-top:6px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
}
.footer-stamp__key{color:var(--brick);}
.footer-stamp__val{color:rgba(242,245,236,.82);}

.footer-cols{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px 20px;
}
.footer-col__title{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.22em;
  color:var(--chalk);
}
.footer-col__title::before{
  content:"";
  width:5px;
  height:5px;
  background:var(--lime);
  flex:0 0 auto;
}
.footer-col__list{display:grid;gap:2px;}
.footer-col__link{
  display:inline-block;
  padding:4px 0;
  font-size:14px;
  color:rgba(242,245,236,.78);
  background-image:linear-gradient(var(--lime),var(--lime));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 1px;
  transition:background-size 180ms var(--ease),color 180ms var(--ease);
}
.footer-col__link:hover,.footer-col__link:focus-visible{
  color:var(--lime);
  background-size:100% 1px;
}

.rule-score{
  height:1px;
  margin:clamp(28px,4vw,44px) 0;
  background-image:repeating-linear-gradient(90deg,rgba(242,245,236,.22) 0 14px,transparent 14px 24px);
}

.footer-contact{
  display:grid;
  grid-template-columns:1fr;
  gap:10px 24px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.03em;
  color:rgba(242,245,236,.82);
}
.footer-contact__item{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 10px;
  word-break:break-word;
}
.footer-contact__key{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  color:var(--lime-dim);
}

.footer-legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 24px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--chalk);
}
.footer-legal__icp{color:var(--paper);}
.footer-legal__links{display:flex;flex-wrap:wrap;gap:8px 18px;}
.footer-legal__link{
  color:rgba(242,245,236,.8);
  border-bottom:1px solid transparent;
  transition:color 180ms var(--ease),border-color 180ms var(--ease);
}
.footer-legal__link:hover,.footer-legal__link:focus-visible{color:var(--lime);border-bottom-color:var(--lime);}
.footer-legal__year{margin-left:auto;color:rgba(242,245,236,.7);}
.footer-legal__note{
  flex-basis:100%;
  max-width:64ch;
  font-family:var(--sans);
  font-size:12px;
  line-height:1.7;
  letter-spacing:.01em;
  color:var(--chalk);
}

/* ---------- 通用内容组件 ---------- */
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.06em;}

.prose{max-width:68ch;font-size:16px;line-height:1.75;}
.prose p + p{margin-top:1em;}
.prose a{color:var(--lime);border-bottom:1px solid rgba(201,255,61,.5);}
.prose ul{list-style:disc;padding-left:1.25em;}
.prose li + li{margin-top:.4em;}

.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
  padding-block:18px 0;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--chalk);
}
.breadcrumb__link{color:var(--chalk);transition:color 180ms var(--ease);}
.breadcrumb__link:hover,.breadcrumb__link:focus-visible{color:var(--lime);}
.breadcrumb__sep{color:var(--lime-dim);}
.breadcrumb__current{color:var(--paper);}

.mono-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  font-family:var(--mono);
  font-size:11px;
  line-height:1;
  letter-spacing:.08em;
  color:var(--paper);
  white-space:nowrap;
}
.mono-tag--lime{background:var(--lime);border-color:var(--lime);color:var(--ink-green);font-weight:700;}
.mono-tag--brick{background:rgba(210,84,60,.12);border-color:rgba(210,84,60,.55);color:var(--brick);}
.mono-tag--dim{background:transparent;border-color:var(--line);color:var(--chalk);}

.panel{
  background:var(--stand-slate);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(16px,2vw,24px);
  box-shadow:var(--shadow-soft);
}
.panel__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding-bottom:10px;
  margin-bottom:14px;
  border-bottom:1px solid var(--line);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--chalk);
}
.panel__label{color:var(--chalk);}
.panel__value{
  font-family:var(--mono);
  font-size:clamp(22px,2.6vw,32px);
  line-height:1;
  letter-spacing:.02em;
  color:var(--lime);
}
.panel__value--brick{color:var(--brick);}

.media-frame{
  position:relative;
  overflow:hidden;
  background:var(--stand-slate);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}
.media-frame__img{
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio:16/10;
  background:linear-gradient(160deg,var(--night-blue),var(--stand-slate));
}
.media-frame__cap{
  padding:8px 12px;
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:12px;
  line-height:1.6;
  letter-spacing:.04em;
  color:var(--chalk);
}
.media-frame--wide .media-frame__img{aspect-ratio:21/9;}
.media-frame--tall .media-frame__img{aspect-ratio:3/4;}
.media-frame--screen{border-color:var(--lime-line);}
.media-frame--screen::after{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(201,255,61,.18);
  pointer-events:none;
}

/* ---------- 滚动显现与索引锚点 ---------- */
.reveal{opacity:1;}

.index-anchor{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:88;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border:1px solid var(--lime-line);
  border-radius:var(--radius);
  background:rgba(7,19,15,.9);
  color:var(--lime);
  font-family:var(--mono);
  font-size:11px;
  line-height:1;
  letter-spacing:.1em;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity 220ms var(--ease),transform 220ms var(--ease),visibility 0s linear 220ms;
}
.index-anchor.is-visible{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
  transition:opacity 220ms var(--ease),transform 220ms var(--ease),visibility 0s;
}
.index-anchor:hover,.index-anchor:focus-visible{background:rgba(201,255,61,.14);}

/* ---------- 平板 ---------- */
@media (min-width:700px){
  .grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:20px;}
  .col-4{grid-column:span 3;}
  .col-6{grid-column:span 4;}
  .col-8{grid-column:span 8;}
  .col-12{grid-column:span 8;}
  .footer-cols{grid-template-columns:repeat(3,minmax(0,1fr));}
  .footer-contact{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* ---------- 桌面框架 ---------- */
@media (min-width:861px){
  body{padding-left:var(--rail-w);}
  .frame-rail{display:flex;}
  .footer-top{grid-template-columns:minmax(220px,1fr) 2fr;gap:48px;}
  .footer-cols > .footer-col:nth-child(2){margin-top:14px;}
  .footer-cols > .footer-col:nth-child(3){margin-top:28px;}
  .index-anchor{right:28px;bottom:26px;}
}

@media (min-width:1100px){
  .grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;}
  .col-4{grid-column:span 4;}
  .col-6{grid-column:span 6;}
  .col-8{grid-column:span 8;}
  .col-12{grid-column:span 12;}
  .grid--stagger > *:nth-child(3n+2){margin-top:12px;}
  .grid--stagger > *:nth-child(3n+3){margin-top:24px;}
}

@media (min-width:1180px){
  .bar-index{display:flex;}
}

/* ---------- 移动端栏目带 ---------- */
@media (max-width:860px){
  body{padding-left:0;}
  .nav-toggle{display:inline-flex;}
  .brand__sub{display:none;}
  .frame-bar{gap:10px;}
  .btn--cta{font-size:11px;padding:8px 12px;}

  .frame-rail{
    display:flex;
    top:var(--bar-h);
    right:0;
    left:0;
    bottom:auto;
    width:auto;
    align-items:stretch;
    gap:10px;
    max-height:min(70vh,440px);
    overflow-y:auto;
    padding:12px 14px 16px;
    border-right:0;
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-soft);
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    pointer-events:none;
    transition:opacity 200ms var(--ease),transform 240ms var(--ease),visibility 0s linear 240ms;
  }
  .frame-rail[data-open]{
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:auto;
    transition:opacity 200ms var(--ease),transform 240ms var(--ease),visibility 0s;
  }
  .rail-cap{display:none;}
  .rail-list{
    flex-direction:row;
    align-items:center;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px 0 6px;
  }
  .rail-link{
    writing-mode:horizontal-tb;
    text-orientation:mixed;
    letter-spacing:.04em;
    padding:8px 12px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    white-space:nowrap;
  }
  .rail-link[aria-current="page"]{
    border-color:var(--lime);
    background:rgba(201,255,61,.12);
  }
  .rail-link[aria-current="page"]::before{display:none;}
  .rail-anchor{
    margin-top:0;
    align-self:flex-start;
    flex-direction:row;
    gap:8px;
    width:auto;
    padding:8px 12px;
  }
  .rail-anchor__val{font-size:9px;}
  .footer-legal__year{margin-left:0;}
}

/* ---------- 动效（仅在允许时启用） ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{transition:opacity 420ms var(--ease),transform 420ms var(--ease);}
  html.js .reveal{opacity:0;transform:translateY(16px);}
  html.js .reveal.is-in{opacity:1;transform:none;}
  .bar-index__dot{animation:stand-pulse 2.8s var(--ease) infinite;}
  @keyframes stand-pulse{
    0%,100%{box-shadow:0 0 0 3px rgba(201,255,61,.16);}
    50%{box-shadow:0 0 0 6px rgba(201,255,61,.04);}
  }
}

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