:root{
  --ink:#062A22;
  --char:#0B0F0E;
  --moss:#193A31;
  --paper:#F2ECDD;
  --lime:#C8FF3D;
  --orange:#FF6B2C;
  --blue:#3D8BFF;
  --fog:#96A39C;
  --night:#0E1C18;
  --alert:#FF4D5E;
  --line:rgba(150,163,156,.26);
  --shell:1240px;
  --gutter:clamp(16px,4vw,44px);
  --font-display:"Barlow Condensed","Oswald","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-body:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --shadow-hard:7px 7px 0 rgba(0,0,0,.45);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:16px;
  font-weight:400;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--lime);color:var(--char)}
:where(a,button,[tabindex]):focus-visible{outline:3px solid var(--lime);outline-offset:3px}
h1,.h1,h2,.h2,h3,.h3,h4,.h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.005em;
  color:var(--paper);
}
h1,.h1{font-size:clamp(38px,6.4vw,84px);margin:0 0 .38em}
h2,.h2{font-size:clamp(26px,3.6vw,46px);line-height:1.12;margin:0 0 .5em}
h3,.h3{font-size:clamp(20px,2.2vw,28px);line-height:1.25;margin:0 0 .5em}
h4,.h4{font-size:clamp(17px,1.6vw,20px);line-height:1.35;margin:0 0 .5em}
strong,b{font-weight:700;color:var(--paper)}
em{font-style:normal;color:var(--lime)}
code,kbd,samp{font-family:var(--font-mono);font-size:.9em;color:var(--lime)}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.page-main{display:block;background:var(--ink)}
#main-content{scroll-margin-top:24px}
.section{padding-block:clamp(40px,6vw,84px)}
.section--alt{background:var(--night)}
.section--char{background:var(--char)}

.skip-link{
  position:absolute;left:var(--gutter);top:-72px;z-index:130;
  background:var(--lime);color:var(--char);
  font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.06em;
  padding:10px 18px;transition:top .18s ease;
}
.skip-link:focus{top:10px}
.scroll-meter{
  position:fixed;inset:0 0 auto 0;height:3px;z-index:120;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--lime),var(--orange) 62%,var(--blue));
  pointer-events:none;
}

/* ---------- 通用展示组件 ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lime);margin:0 0 14px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--orange);flex:0 0 auto}
.index-num{
  display:block;font-family:var(--font-mono);font-weight:700;
  font-size:clamp(28px,4.4vw,48px);line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--orange);
}
.rule{height:3px;background:var(--moss);border:0;margin:0}
.rule--accent{background:linear-gradient(90deg,var(--orange),transparent)}
.prose{max-width:62ch}
.prose p{max-width:46em;margin:0 0 1.15em;line-height:1.9}
.prose p:last-child{margin-bottom:0}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.4em;line-height:1.85}
.prose ul li{list-style:none;position:relative;margin-bottom:.4em}
.prose ul li::before{content:"";position:absolute;left:-1.1em;top:.72em;width:8px;height:2px;background:var(--orange)}
.prose ol{list-style:decimal}
.prose ol li{list-style:decimal;margin-bottom:.4em}
.prose a{color:var(--lime);border-bottom:1px solid rgba(200,255,61,.45)}
.prose a:hover{border-bottom-color:var(--lime)}

.grid{display:grid;gap:clamp(16px,2.6vw,36px)}
@media (min-width:700px){
  .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:960px){
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid--3-9{grid-template-columns:minmax(0,3fr) minmax(0,9fr)}
  .grid--4-8{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
  .grid--7-5{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 22px;border:2px solid transparent;
  font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:.04em;line-height:1.2;
  cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,color .16s ease,border-color .16s ease;
}
.btn--lime{background:var(--lime);color:var(--char);border-color:var(--lime);box-shadow:var(--shadow-hard)}
.btn--lime:hover{transform:translate(-2px,-2px);box-shadow:10px 10px 0 rgba(0,0,0,.5)}
.btn--orange{background:var(--orange);color:var(--char);border-color:var(--orange);box-shadow:7px 7px 0 rgba(0,0,0,.45)}
.btn--orange:hover{transform:translate(-2px,-2px)}
.btn--ghost{background:transparent;color:var(--paper);border-color:var(--moss)}
.btn--ghost:hover{border-color:var(--lime);color:var(--lime)}

.tag{
  display:inline-flex;align-items:center;gap:6px;padding:2px 9px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line);color:var(--fog);
}
.tag--lime{background:var(--lime);color:var(--char);border-color:var(--lime)}
.tag--blue{color:var(--blue);border-color:rgba(61,139,255,.5)}

.panel{background:var(--night);border:2px solid var(--moss);padding:clamp(16px,2.4vw,28px)}

.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--fog);
  padding-block:18px;
}
.breadcrumb a{color:var(--fog);transition:color .16s ease}
.breadcrumb a:hover{color:var(--lime)}
.breadcrumb li+li::before{content:"/";margin-right:8px;color:var(--moss)}
.breadcrumb [aria-current="page"]{color:var(--paper)}

/* ---------- 图片容器基础规则 ---------- */
.media{
  position:relative;display:block;overflow:hidden;
  background:var(--night);border:2px solid var(--moss);aspect-ratio:16/9;
}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(11,15,14,.32) 0 1px,transparent 1px 3px);
  opacity:.5;mix-blend-mode:multiply;
}
.media--wide{aspect-ratio:21/9}
.media--tall{aspect-ratio:4/5}
.media--square{aspect-ratio:1/1}

/* ---------- 页头 ---------- */
.site-header{position:relative;z-index:80;background:var(--char)}
.masthead{background:var(--char);border-bottom:1px solid rgba(150,163,156,.18)}
.masthead__inner{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 22px;
  min-height:56px;padding-block:9px;
}
.masthead__brand{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;color:var(--paper)}
.masthead__mark{
  display:inline-block;font-family:var(--font-mono);font-weight:700;font-size:13px;
  letter-spacing:-.14em;line-height:1;color:var(--char);background:var(--lime);
  padding:7px 9px 7px 6px;
}
.masthead__name{
  font-family:var(--font-display);font-weight:700;font-size:19px;
  letter-spacing:.04em;line-height:1;white-space:nowrap;
}
.masthead__claim{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;
  color:var(--fog);margin:0;
}
.masthead__claim::before{content:"// ";color:var(--orange)}
.masthead__alert{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
  color:var(--paper);background:rgba(255,77,94,.1);
  border:1px solid rgba(255,77,94,.5);padding:6px 12px;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.masthead__alert:hover{background:var(--alert);color:var(--char);border-color:var(--alert)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--fog)}
.dot--alert{background:var(--alert);box-shadow:0 0 0 3px rgba(255,77,94,.16);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

.navbar{position:relative;background:var(--ink);border-bottom:2px solid var(--moss);box-shadow:0 10px 24px rgba(0,0,0,.28)}
.navbar__inner{position:relative;display:flex;align-items:stretch;gap:14px}
.nav{flex:1 1 auto;min-width:0}
.nav__list{display:flex;flex-wrap:wrap;align-items:stretch;gap:2px}
.nav__item{display:flex}
.nav__link{
  position:relative;display:inline-flex;align-items:baseline;gap:8px;
  padding:15px 12px 17px;font-size:15px;font-weight:500;line-height:1.2;
  color:rgba(242,236,221,.82);
  transition:color .16s ease,background-color .16s ease;
}
.nav__link:hover{color:var(--lime);background:var(--night)}
.nav__link[aria-current="page"]{color:var(--lime)}
.nav__link[aria-current="page"]::after{
  content:"";position:absolute;left:12px;right:12px;bottom:7px;height:2px;background:var(--orange);
}
.nav__index{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--orange);opacity:.85}
.nav__link:hover .nav__index,.nav__link[aria-current="page"] .nav__index{opacity:1}
.navbar__cta{
  align-self:center;flex:0 0 auto;margin-left:auto;
  display:inline-flex;align-items:center;gap:8px;padding:9px 18px;
  background:var(--lime);color:var(--char);border-left:4px solid var(--orange);
  font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.05em;line-height:1;
  transition:transform .16s ease,box-shadow .16s ease;
}
.navbar__cta:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--orange)}
.nav-toggle{
  display:none;align-items:center;gap:10px;padding:14px 4px;
  color:var(--paper);font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
}
.nav-toggle__bars{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:22px;height:16px}
.nav-toggle__bars i{display:block;height:2px;background:var(--lime);transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- 页脚 ---------- */
.site-footer{
  background-color:var(--char);
  background-image:
    linear-gradient(rgba(150,163,156,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(150,163,156,.06) 1px,transparent 1px);
  background-size:56px 56px;
  color:var(--paper);
  border-top:3px solid var(--moss);
  padding-top:clamp(36px,5vw,64px);
}
.footer__grid{
  display:grid;grid-template-columns:1fr;gap:clamp(26px,3.6vw,48px);
  padding-bottom:clamp(28px,4vw,52px);
}
.footer__brand{max-width:44ch}
.footer__logo{
  display:inline-block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(22px,2.6vw,30px);letter-spacing:.03em;color:var(--paper);
  border-bottom:3px solid var(--lime);padding-bottom:4px;margin-bottom:16px;
}
.footer__note{font-size:15px;line-height:1.85;color:rgba(242,236,221,.72);margin-bottom:14px}
.footer__hint{
  font-family:var(--font-mono);font-size:12px;line-height:1.9;letter-spacing:.02em;
  color:var(--fog);border-left:2px solid var(--blue);padding-left:12px;margin:0;
}
.footer__title{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.2em;
  color:var(--lime);margin:0 0 14px;
}
.footer__title::after{content:"";flex:1;height:1px;background:var(--line)}
.footer__list{display:flex;flex-direction:column;gap:1px}
.footer__link{
  display:inline-flex;align-items:center;gap:9px;padding:6px 0;
  font-size:15px;color:rgba(242,236,221,.76);
  transition:color .16s ease,transform .16s ease;
}
.footer__link::before{content:"";width:8px;height:1px;background:var(--orange);flex:0 0 auto;transition:width .16s ease}
.footer__link:hover{color:var(--lime);transform:translateX(3px)}
.footer__link:hover::before{width:18px}
.footer__meta{display:flex;flex-direction:column;gap:12px;margin:0}
.footer__meta-row{display:flex;flex-direction:column;gap:1px}
.footer__meta dt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;color:var(--fog)}
.footer__meta dd{margin:0;font-size:14px;line-height:1.65;color:var(--paper);word-break:break-word;font-family:var(--font-mono)}
.copy-btn{
  margin-top:14px;align-self:flex-start;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  color:var(--lime);border:1px solid rgba(200,255,61,.45);padding:5px 11px;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.copy-btn:hover{background:var(--lime);color:var(--char)}
.copy-btn[data-copied="true"]{background:var(--blue);border-color:var(--blue);color:var(--paper)}
.footer__base{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;
  border-top:1px solid var(--line);padding-block:18px 26px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--fog);
}
.footer__legal{display:flex;flex-wrap:wrap;gap:18px}
.footer__legal a{color:var(--fog);border-bottom:1px solid transparent;transition:color .16s ease,border-color .16s ease}
.footer__legal a:hover{color:var(--lime);border-bottom-color:var(--lime)}
.to-top{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;
  color:var(--paper);border:1px solid var(--line);padding:7px 13px;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.to-top:hover{background:var(--lime);color:var(--char);border-color:var(--lime)}

/* ---------- 进入动效 ---------- */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease}
[data-reveal].is-visible{opacity:1;transform:none}

/* ---------- 响应式 ---------- */
@media (min-width:700px) and (max-width:979px){
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1 / -1}
}
@media (min-width:980px){
  .footer__grid{grid-template-columns:1.5fr .8fr 1.1fr}
}
@media (max-width:900px){
  .masthead__claim{display:none}
  .masthead__inner{min-height:52px}
  .nav-toggle{display:inline-flex}
  .navbar__inner{flex-wrap:wrap;gap:0}
  .navbar__cta{margin-left:auto;font-size:14px;padding:8px 14px}
  .nav{
    position:absolute;left:calc(var(--gutter) * -1);right:calc(var(--gutter) * -1);top:100%;
    z-index:90;background:var(--night);
    border-top:1px solid var(--moss);border-bottom:3px solid var(--orange);
    box-shadow:0 26px 44px rgba(0,0,0,.6);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
  }
  .nav[data-open]{opacity:1;visibility:visible;transform:none}
  .nav__list{flex-direction:column;gap:0}
  .nav__item{border-bottom:1px solid rgba(150,163,156,.16)}
  .nav__item:last-child{border-bottom:0}
  .nav__link{width:100%;padding:14px 18px;border-left:3px solid transparent;font-size:15.5px}
  .nav__link[aria-current="page"]{border-left-color:var(--orange);background:rgba(200,255,61,.06)}
  .nav__link[aria-current="page"]::after{display:none}
  .footer__title{margin-top:4px}
}
@media (max-width:560px){
  .masthead__name{font-size:17px}
  .masthead__alert{padding:5px 10px;font-size:11px}
  .to-top{margin-left:0}
  .footer__base{gap:10px 18px}
  .btn{padding:11px 18px;font-size:15px}
}

/* ---------- 无障碍：减少动效 ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{opacity:1;transform:none}
  .dot--alert{animation:none}
}