*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;scroll-behavior:smooth}
body,h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}

:root{
  --ink:#0A1F19;
  --coal:#12100F;
  --rail:#06120F;
  --surface:#1D3A33;
  --surface-2:#16302A;
  --orange:#FF6B2C;
  --mint:#3BF0C4;
  --brick:#B2402C;
  --amber:#FFD166;
  --cold:#94A39C;
  --fog:#F2F5F1;
  --edge:rgba(148,163,156,.28);
  --edge-strong:rgba(148,163,156,.46);
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono","Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:1240px;
  --gap:12px;
  --shadow-hard:6px 6px 0 #06120F;
  --shadow-flare:6px 6px 0 rgba(178,64,44,.65);
}

body{
  background:var(--ink);
  color:var(--fog);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}

:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:2px}

/* ---------- 排版 ---------- */
.h1{font-size:clamp(34px,4.6vw,56px);font-weight:900;line-height:1.06;letter-spacing:-.02em}
.h2{font-size:clamp(26px,3.2vw,40px);font-weight:900;line-height:1.12;letter-spacing:-.015em}
.h3{font-size:clamp(20px,2.2vw,30px);font-weight:800;line-height:1.2;letter-spacing:-.01em}
.h4{font-size:clamp(18px,1.6vw,22px);font-weight:800;line-height:1.32}
.t-skew{display:inline-block;transform:skewX(-3deg)}
.mono{font-family:var(--mono);font-size:.92em;letter-spacing:.04em}
.prose{max-width:34em;font-size:16px;line-height:1.75;color:rgba(242,245,241,.88)}
.prose>p+p{margin-top:14px}
.prose a{color:var(--mint);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--fog);font-weight:800}
.prose ul{list-style:none;margin-top:12px}
.prose ul li{padding-left:18px;position:relative}
.prose ul li+li{margin-top:6px}
.prose ul li::before{content:"";position:absolute;left:0;top:.78em;width:8px;height:2px;background:var(--orange)}

/* ---------- 栅格与容器 ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(14px,4vw,32px)}
.section{padding-block:clamp(40px,6vw,80px)}
.section--tight{padding-block:clamp(22px,3.4vw,40px)}
.grid{display:grid;gap:var(--gap)}
.bento{display:grid;gap:var(--gap);grid-template-columns:repeat(12,minmax(0,1fr))}
.bento>*{min-width:0}
.stack>*+*{margin-top:var(--stack-gap,16px)}
.divider{height:2px;background:var(--surface);border:0;margin:0}

/* ---------- 标签 ---------- */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:11px;line-height:1.4;letter-spacing:.1em;
  padding:4px 8px;border:1px solid var(--edge-strong);border-radius:2px;
  color:var(--cold);white-space:nowrap;
}
.tag--mint{background:var(--mint);border-color:var(--mint);color:var(--rail)}
.tag--orange{background:var(--orange);border-color:var(--orange);color:var(--rail)}
.tag--amber{background:var(--amber);border-color:var(--amber);color:var(--coal)}
.tag--brick{background:var(--brick);border-color:var(--brick);color:var(--fog)}

/* ---------- 按钮 ---------- */
.btn{
  --btn-bg:var(--orange);--btn-fg:var(--rail);--btn-shadow:var(--brick);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:12px 22px;border-radius:2px;
  background:var(--btn-bg);color:var(--btn-fg);
  border:2px solid var(--rail);
  box-shadow:4px 4px 0 var(--btn-shadow);
  font-family:var(--sans);font-size:15px;font-weight:800;letter-spacing:.02em;
  cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;
}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--btn-shadow)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--btn-shadow)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--mint);--btn-shadow:rgba(59,240,196,.22);border-color:var(--mint)}
.btn--quiet{--btn-bg:var(--surface);--btn-fg:var(--fog);--btn-shadow:var(--rail);border-color:var(--rail)}
.btn--sm{min-height:38px;padding:8px 14px;font-size:13px}

/* ---------- 卡片 ---------- */
.card{
  background:var(--surface);
  border:2px solid var(--edge);
  border-radius:2px;
  box-shadow:var(--shadow-hard);
  padding:clamp(16px,2vw,24px);
}
.card--flare{border-color:var(--orange);box-shadow:var(--shadow-flare)}
.card--flat{background:rgba(29,58,51,.5);border-color:rgba(148,163,156,.2);box-shadow:none}
.card__title{font-size:clamp(17px,1.5vw,20px);font-weight:800;line-height:1.3;margin-bottom:8px}
.card__meta{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--cold);display:flex;flex-wrap:wrap;gap:6px 12px;
}

/* ---------- 图片容器 ---------- */
.media-frame{
  position:relative;overflow:hidden;
  aspect-ratio:16/10;
  border:2px solid var(--surface);
  border-radius:2px;
  background:repeating-linear-gradient(135deg,#16302A 0 10px,#132822 10px 20px);
  box-shadow:var(--shadow-hard);
}
.media-frame>img,.media-frame>svg{width:100%;height:100%;object-fit:cover}
.media-frame--wide{aspect-ratio:21/9}
.media-frame--tall{aspect-ratio:3/4}
.media-frame--square{aspect-ratio:1/1}
.media-frame--cut{clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}
.media-frame__cap{
  position:absolute;left:0;bottom:0;margin:0;
  padding:6px 10px;background:var(--rail);color:var(--cold);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  border-top:1px solid var(--edge);border-right:1px solid var(--edge);
}

/* ---------- 横向主题带 ---------- */
.band{
  background:var(--coal);
  border-top:2px solid var(--surface);
  border-bottom:2px solid var(--surface);
  padding-block:clamp(18px,3vw,30px);
}
.band__inner{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;
}
.band__label{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  color:var(--mint);text-transform:uppercase;
}
.band__title{font-size:clamp(21px,2.5vw,30px);font-weight:900;line-height:1.2;letter-spacing:-.01em}

/* ---------- 面包屑 ---------- */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding-block:18px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--cold);
}
.crumbs a{color:var(--cold);border-bottom:1px solid var(--edge-strong);padding-bottom:1px}
.crumbs a:hover{color:var(--mint);border-bottom-color:var(--mint)}
.crumbs__sep{opacity:.5}
.crumbs [aria-current="page"]{color:var(--fog)}

/* ---------- 分段切换 ---------- */
.seg{display:block}
.seg__list{display:flex;flex-wrap:wrap;gap:6px;border-bottom:2px solid var(--surface)}
.seg__btn{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:10px 16px;
  border:2px solid transparent;border-bottom:0;border-radius:2px 2px 0 0;
  color:var(--cold);font-weight:800;font-size:14px;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.seg__btn:hover{color:var(--fog);background:rgba(29,58,51,.65)}
.seg__btn[aria-selected="true"]{background:var(--orange);border-color:var(--orange);color:var(--rail)}
.seg__panel{padding-top:20px;animation:seg-shift .18s ease}
.seg__panel[hidden]{display:none}
@keyframes seg-shift{from{transform:translateX(12px)}to{transform:translateX(0)}}

/* ---------- 跳转链接 ---------- */
.skip-link{
  position:fixed;top:-90px;left:16px;z-index:999;
  padding:12px 20px;border-radius:2px;
  background:var(--mint);color:var(--rail);
  border:2px solid var(--rail);box-shadow:4px 4px 0 var(--rail);
  font-size:14px;font-weight:800;
  transition:top .14s ease;
}
.skip-link:focus{top:14px}

/* ---------- 头部 ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--rail);
  border-left:2px solid var(--surface);
  border-right:2px solid var(--surface);
  border-bottom:2px solid var(--surface);
  box-shadow:0 8px 0 rgba(6,18,15,.55);
}
.header-top{background:var(--rail);border-bottom:1px solid rgba(148,163,156,.16)}
.header-top__inner{
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:10px clamp(14px,4vw,32px);
  min-height:64px;
  display:flex;align-items:center;gap:16px;
}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--fog);font-weight:900}
.brand__mark{
  display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;
  background:var(--orange);color:var(--rail);
  font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.02em;
  border:2px solid var(--rail);box-shadow:3px 3px 0 var(--brick);
  transform:skewX(-6deg);border-radius:2px;
}
.brand__text{font-size:clamp(16px,1.6vw,19px);letter-spacing:.02em;white-space:nowrap}
.brand__code{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--mint);border:1px solid rgba(59,240,196,.42);
  padding:3px 6px;border-radius:2px;white-space:nowrap;
}
.brand--footer .brand__text{font-size:20px}
.header-utils{margin-left:auto;display:flex;align-items:center;gap:12px}
.status-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:2px;
  background:rgba(59,240,196,.08);border:1px solid rgba(59,240,196,.34);
  font-size:12px;line-height:1.4;color:var(--fog);white-space:nowrap;
}
.status-pill__dot{
  width:8px;height:8px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 0 0 rgba(59,240,196,.55);
  animation:pill-pulse 2.4s ease-out infinite;
}
@keyframes pill-pulse{
  0%{box-shadow:0 0 0 0 rgba(59,240,196,.55)}
  70%{box-shadow:0 0 0 8px rgba(59,240,196,0)}
  100%{box-shadow:0 0 0 0 rgba(59,240,196,0)}
}
.status-pill__code{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--mint)}
.util-link{
  display:inline-flex;align-items:center;min-height:44px;padding:8px 2px;
  font-size:13px;font-weight:700;color:var(--fog);
  border-bottom:2px solid transparent;
  transition:border-color .15s ease,color .15s ease;
}
.util-link:hover,.util-link:focus-visible{border-bottom-color:var(--mint)}
.util-link--cta{
  padding:8px 14px;border:2px solid var(--orange);border-bottom:2px solid var(--orange);
  background:var(--orange);color:var(--rail);
  box-shadow:3px 3px 0 var(--brick);border-radius:2px;
  transition:transform .12s ease,box-shadow .12s ease;
}
.util-link--cta:hover,.util-link--cta:focus-visible{
  transform:translate(2px,2px);box-shadow:1px 1px 0 var(--brick);border-bottom-color:var(--orange);
}
.nav-toggle{
  display:none;align-items:center;gap:8px;
  min-height:44px;min-width:44px;padding:8px 12px;
  border:2px solid var(--edge-strong);border-radius:2px;
  color:var(--fog);cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.nav-toggle[aria-expanded="true"]{background:var(--mint);border-color:var(--mint);color:var(--rail)}
.nav-toggle__bars{display:inline-flex;flex-direction:column;gap:4px;width:18px}
.nav-toggle__bars span{display:block;height:2px;background:currentColor;transition:transform .16s ease,opacity .16s ease}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.site-nav{background:var(--ink)}
.site-nav__inner{
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding-inline:clamp(14px,4vw,32px);
}
.nav-list{display:flex;flex-wrap:wrap;gap:2px}
.nav-item{min-width:0}
.nav-link{
  display:inline-flex;align-items:baseline;gap:8px;
  padding:15px 18px;min-height:44px;
  border-bottom:3px solid transparent;
  color:var(--cold);font-size:15px;font-weight:700;letter-spacing:.01em;
  transition:color .15s ease,background .15s ease,border-color .15s ease;
}
.nav-link__index{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:rgba(148,163,156,.62)}
.nav-link:hover{color:var(--fog);background:rgba(29,58,51,.6)}
.nav-link[aria-current="page"]{
  color:var(--orange);background:rgba(255,107,44,.09);
  border-bottom-color:var(--orange);
}
.nav-link[aria-current="page"] .nav-link__index{color:var(--orange)}

/* ---------- 页脚 ---------- */
.site-footer{
  position:relative;
  background:var(--rail);
  border-top:2px solid var(--surface);
  color:var(--fog);
}
.site-footer::before{
  content:"";display:block;height:8px;
  background:repeating-linear-gradient(100deg,var(--orange) 0 14px,transparent 14px 42px);
}
.footer-grid{
  display:grid;gap:clamp(24px,3.2vw,40px);
  grid-template-columns:1.35fr 1fr 1fr 1.25fr;
  align-items:start;
  padding-block:clamp(36px,5vw,64px) clamp(24px,3vw,36px);
}
.footer-col{min-width:0}
.footer-col:nth-child(2){margin-top:18px}
.footer-col:nth-child(3){margin-top:36px}
.footer-col:nth-child(4){margin-top:54px}
.footer-h{
  display:flex;align-items:center;gap:10px;
  margin-bottom:14px;
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mint);
}
.footer-h::after{content:"";flex:1;height:1px;background:var(--edge)}
.footer-note{margin-top:14px;font-size:13px;line-height:1.85;color:var(--cold)}
.footer-stamp{
  margin-top:16px;display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:2px;
  border:1px solid rgba(255,209,102,.45);
  background:rgba(255,209,102,.1);
  font-size:12px;color:var(--fog);
}
.footer-stamp .mono{color:var(--amber)}
.footer-stamp__k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--cold)}
.footer-list{display:grid;gap:4px}
.footer-link{
  display:inline-flex;align-items:center;gap:10px;
  min-height:34px;padding:4px 0;
  font-size:14px;color:var(--cold);
  border-bottom:1px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
.footer-link__idx{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:rgba(148,163,156,.58)}
.footer-link:hover{color:var(--mint);border-bottom-color:rgba(59,240,196,.5)}
.footer-meta{display:grid;gap:10px;font-size:13px}
.footer-meta li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:baseline}
.footer-meta__k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:rgba(148,163,156,.75)}
.footer-meta__v{color:var(--fog);word-break:break-word}
.footer-legal{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
  padding:18px 0 28px;
  border-top:1px solid rgba(148,163,156,.2);
  font-size:12px;letter-spacing:.02em;color:var(--cold);
}
.footer-legal a{color:var(--cold);border-bottom:1px solid var(--edge-strong);padding-bottom:1px}
.footer-legal a:hover{color:var(--mint);border-bottom-color:var(--mint)}
.footer-legal .mono{color:rgba(242,245,241,.8)}
.footer-legal__sep{opacity:.45}

/* ---------- 入视口落格 ---------- */
.has-js [data-reveal]{
  opacity:0;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease;
}
.has-js [data-reveal].is-in{opacity:1;transform:translateY(0)}

/* ---------- 平板 ---------- */
@media (max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-col:nth-child(2),
  .footer-col:nth-child(3),
  .footer-col:nth-child(4){margin-top:0}
  .footer-col:nth-child(3),
  .footer-col:nth-child(4){margin-top:14px}
}

/* ---------- 移动导航 ---------- */
@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  .site-nav{display:none;border-top:1px solid rgba(148,163,156,.16)}
  .site-nav[data-open="true"]{display:block}
  .site-nav__inner{padding-block:6px}
  .nav-list{flex-direction:column;gap:0}
  .nav-item{width:100%}
  .nav-link{
    width:100%;display:flex;padding:14px 12px;
    border-bottom:1px solid rgba(148,163,156,.16);
    border-left:3px solid transparent;
  }
  .nav-link[aria-current="page"]{
    border-left-color:var(--orange);
    border-bottom-color:rgba(148,163,156,.16);
  }
}

/* ---------- 小屏 ---------- */
@media (max-width:720px){
  .header-top__inner{flex-wrap:wrap;row-gap:10px;padding-block:10px}
  .brand__code{display:none}
  .header-utils{
    order:3;flex:1 0 100%;margin-left:0;
    justify-content:space-between;gap:10px;
    padding-top:10px;border-top:1px dashed rgba(148,163,156,.25);
  }
  .nav-toggle{order:2;margin-left:auto}
  .status-pill__label{display:none}
  .util-link{font-size:12px}
  .prose{font-size:15px;line-height:1.8}
}

@media (max-width:620px){
  .footer-grid{grid-template-columns:1fr;gap:22px}
  .footer-col:nth-child(n){margin-top:0}
  .footer-col{padding-bottom:18px;border-bottom:1px dashed rgba(148,163,156,.2)}
  .footer-col:last-child{border-bottom:0;padding-bottom:0}
  .footer-meta li{grid-template-columns:40px minmax(0,1fr)}
  .footer-legal{font-size:11px}
}

/* ---------- 降级动效 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .has-js [data-reveal]{opacity:1!important;transform:none!important}
  .btn:hover,.btn:active,.util-link--cta:hover{transform:none}
}