*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--graphite);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
:root{
  --silver:#C7CDD4;
  --track-red:#C92F24;
  --graphite:#16181D;
  --rock:#5E646B;
  --paper:#F4EFE7;
  --moss:#6B7A5A;
  --clay:#B46B4F;
  --neon:#36E0D0;
  --volt:#F5E64A;
  --night:#1F2A44;
  --gutter:clamp(1rem,4vw,2.5rem);
  --shell:min(1240px,calc(100% - var(--gutter) * 2));
  --font-display:"Barlow Condensed","DIN Condensed","Source Han Sans SC","Noto Sans SC","PingFang SC",system-ui,sans-serif;
  --font-mono:"JetBrains Mono","Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font-body:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --edge:rgba(22,24,29,.16);
  --edge-strong:rgba(22,24,29,.34);
  --on-dark:rgba(244,239,231,.16);
}
img,svg,picture,video{max-width:100%}
button{font:inherit}
ul,ol{list-style:none;padding:0}
a{color:inherit}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--neon);outline-offset:3px;border-radius:4px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ===== 排版 ===== */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.015em;
  color:var(--graphite);
  text-wrap:balance;
  margin:0 0 .45em;
}
h1{font-size:clamp(2.35rem,6.6vw,4.5rem)}
h2{font-size:clamp(1.65rem,3.4vw,2.5rem)}
h3{font-size:clamp(1.12rem,1.9vw,1.4rem);letter-spacing:0}
h4{font-size:1rem;letter-spacing:.02em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
strong{font-weight:700}
.lede{font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.85;color:var(--rock);max-width:60ch}
.mono-meta{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--rock)}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--track-red);margin-bottom:.85rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--track-red);display:block}
.rule{width:52px;height:3px;border:0;background:var(--track-red);margin:0 0 1rem}

/* ===== 布局容器 ===== */
.shell{width:var(--shell);margin-inline:auto}
.page-main{display:block;padding-block:clamp(1.5rem,4vw,3rem) 0}
.section{padding-block:clamp(2rem,5vw,3.5rem)}
.section--tint{background:linear-gradient(180deg,rgba(199,205,212,.28),rgba(244,239,231,0))}
.grid{display:grid;gap:clamp(1rem,2.5vw,2rem)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:start}

/* ===== 按钮 / 标签 / 卡片 / 纸张 ===== */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.05em;
  text-decoration:none;padding:.75rem 1.15rem;border-radius:999px;
  border:1px solid transparent;cursor:pointer;
  transition:transform .18s ease,background-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.btn--red{background:var(--track-red);color:#fff}
.btn--red:hover{background:var(--graphite);box-shadow:inset 0 0 0 2px var(--volt);transform:translateY(-1px)}
.btn--ghost{border-color:var(--edge-strong);color:var(--graphite);background:transparent}
.btn--ghost:hover{border-color:var(--graphite);background:rgba(22,24,29,.06)}
.btn--dark{background:var(--graphite);color:var(--paper)}
.btn--dark:hover{background:var(--night);box-shadow:inset 0 0 0 2px var(--neon)}
.tag{
  display:inline-block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;
  padding:.25rem .5rem;border-radius:4px;background:rgba(107,122,90,.14);
  color:#48543d;border:1px solid rgba(107,122,90,.38);
}
.tag--clay{background:rgba(180,107,79,.14);color:#8d4d35;border-color:rgba(180,107,79,.4)}
.tag--moss{background:rgba(107,122,90,.14);color:#48543d}
.card{
  background:var(--paper);border:1px solid var(--edge);border-radius:16px;
  padding:clamp(1rem,2.5vw,1.5rem);box-shadow:7px 7px 0 rgba(22,24,29,.07);
}
.plate{
  position:relative;background:var(--paper);border:1px solid var(--edge-strong);
  border-radius:6px;padding:clamp(1rem,2.5vw,1.6rem);
  box-shadow:10px 10px 0 -2px rgba(199,205,212,.9);
}
.plate::after{
  content:"";position:absolute;inset:6px;border:1px dashed rgba(22,24,29,.14);
  border-radius:3px;pointer-events:none;
}
.breadcrumb{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;color:var(--rock);margin-bottom:1.1rem}
.breadcrumb-list{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.breadcrumb-list li+li::before{content:"/";margin-right:.4rem;color:var(--clay)}
.breadcrumb-link{color:var(--rock);text-decoration:none}
.breadcrumb-link:hover{color:var(--track-red);text-decoration:underline}
.breadcrumb-current{color:var(--graphite)}

/* ===== 图片容器基础 ===== */
.figure-frame{
  position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;
  border-radius:14px;border:1px solid var(--edge);
  background:linear-gradient(135deg,var(--silver),#EDEFF1 46%,#BFC6CE);
  box-shadow:0 24px 44px -34px rgba(22,24,29,.95);
  isolation:isolate;
}
.figure-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(22,24,29,.07) 0 1px,transparent 1px 15px);
}
.figure-frame img,.figure-frame picture,.figure-frame svg{display:block;width:100%;height:100%;object-fit:cover}
.figure-frame--wide{aspect-ratio:21/9}
.figure-frame--tall{aspect-ratio:4/5}
.figure-tag{
  position:absolute;left:.75rem;bottom:.75rem;z-index:2;
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(22,24,29,.86);color:var(--volt);padding:.34rem .58rem;border-radius:4px;
}

/* ===== 共享头部 ===== */
.site-header{
  position:sticky;top:0;z-index:120;
  margin-bottom:1.25rem;
  font-family:var(--font-body);
}
.scroll-rail{
  position:absolute;top:0;left:0;right:0;height:3px;z-index:6;
  background:linear-gradient(90deg,var(--track-red),var(--clay) 55%,var(--volt));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .08s linear;
}
.skip-link{
  position:absolute;left:var(--gutter);top:.4rem;z-index:200;
  transform:translateY(-180%);
  background:var(--volt);color:var(--graphite);
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;
  padding:.55rem .95rem;border:2px solid var(--graphite);border-radius:999px;
  text-decoration:none;transition:transform .16s ease;
}
.skip-link:focus,.skip-link:focus-visible{transform:translateY(0)}

.header-band{
  background-color:var(--graphite);
  background-image:repeating-linear-gradient(90deg,rgba(244,239,231,.09) 0 1px,transparent 1px 44px);
  color:var(--paper);
  padding-block:.55rem 1rem;
  border-bottom:1px solid rgba(244,239,231,.14);
}
.console-bar{
  width:var(--shell);margin-inline:auto;
  display:flex;align-items:center;gap:.75rem;min-height:34px;
}
.console-key{
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--silver);flex:none;white-space:nowrap;
}
.console-bar > .console-key:first-child{color:rgba(244,239,231,.62)}
.console-track{
  display:flex;align-items:center;gap:.3rem;flex:1 1 auto;min-width:0;
  overflow-x:auto;scrollbar-width:none;padding-block:.15rem;
  scroll-snap-type:x proximity;
}
.console-track::-webkit-scrollbar{display:none}
.console-split{width:1px;height:15px;flex:none;margin-inline:.45rem;background:rgba(199,205,212,.34)}
.chip{
  flex:none;appearance:none;cursor:pointer;white-space:nowrap;scroll-snap-align:start;
  background:transparent;color:var(--silver);
  border:1px solid rgba(199,205,212,.34);border-radius:999px;
  font-family:var(--font-mono);font-size:.72rem;line-height:1;
  padding:.42rem .62rem;
  transition:color .16s ease,border-color .16s ease,background-color .16s ease,transform .16s ease;
}
.chip:hover{color:var(--paper);border-color:var(--neon);transform:translateY(-1px)}
.chip[aria-pressed="true"]{
  background:var(--track-red);border-color:var(--track-red);color:#fff;
  box-shadow:0 0 0 1px rgba(245,230,74,.55),0 0 18px -6px var(--track-red);
}
.console-launch{
  flex:none;text-decoration:none;white-space:nowrap;
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.02em;
  background:var(--volt);color:var(--graphite);
  padding:.46rem .82rem;border-radius:999px;
  transition:background-color .16s ease,transform .16s ease;
}
.console-launch:hover{background:var(--neon);transform:translateY(-1px)}

.island-wrap{width:var(--shell);margin-inline:auto;margin-top:-1.35rem;position:relative}
.header-island{
  position:relative;
  display:flex;align-items:center;gap:clamp(.5rem,1.6vw,1.25rem);
  background:rgba(244,239,231,.93);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid rgba(22,24,29,.88);
  border-radius:999px;
  padding:.42rem .5rem .42rem 1rem;
  box-shadow:0 20px 32px -24px rgba(22,24,29,.95),0 1px 0 rgba(255,255,255,.7) inset;
  transition:box-shadow .22s ease,background-color .22s ease;
}
.site-header[data-condensed] .header-island{
  background:rgba(244,239,231,.98);
  box-shadow:0 26px 40px -22px rgba(22,24,29,1),0 0 0 1px rgba(201,47,36,.22);
}
.brand{display:inline-flex;flex-direction:column;gap:.1rem;text-decoration:none;flex:none;color:var(--graphite)}
.brand-mark{font-family:var(--font-display);font-weight:800;font-size:1.16rem;line-height:1;letter-spacing:-.01em;transition:color .16s ease}
.brand-tag{font-family:var(--font-mono);font-size:.54rem;line-height:1;letter-spacing:.3em;color:var(--rock)}
.brand:hover .brand-mark{color:var(--track-red)}

.nav-panel{flex:1 1 auto;min-width:0;display:flex;justify-content:center}
.nav-list{display:flex;align-items:center;justify-content:center;gap:.08rem;flex-wrap:nowrap}
.nav-link{
  display:inline-flex;align-items:baseline;gap:.3rem;
  padding:.48rem .45rem;border-radius:999px;
  text-decoration:none;color:var(--graphite);
  font-size:clamp(.72rem,.86vw,.85rem);font-weight:600;white-space:nowrap;
  transition:background-color .16s ease,color .16s ease;
}
.nav-idx{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.06em;color:var(--rock);transition:color .16s ease}
.nav-link:hover{background:rgba(22,24,29,.08);color:var(--track-red)}
.nav-link[aria-current="page"]{background:var(--graphite);color:var(--paper)}
.nav-link[aria-current="page"] .nav-idx{color:var(--volt)}
.nav-cta{display:none}
.island-actions{display:flex;align-items:center;gap:.45rem;flex:none;margin-left:auto}
.header-cta{
  text-decoration:none;white-space:nowrap;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.02em;
  background:var(--track-red);color:#fff;
  padding:.56rem .85rem;border-radius:999px;
  transition:background-color .16s ease,box-shadow .16s ease;
}
.header-cta:hover{background:var(--graphite);box-shadow:inset 0 0 0 2px var(--volt)}
.nav-toggle{
  display:none;width:42px;height:42px;padding:0;flex:none;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  background:var(--paper);color:var(--graphite);
  border:1px solid rgba(22,24,29,.28);border-radius:50%;cursor:pointer;
  transition:border-color .16s ease,background-color .16s ease;
}
.nav-toggle:hover{border-color:var(--graphite);background:#fff}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--graphite);transition:transform .2s ease,opacity .2s ease}
.nav-toggle[data-open]{background:var(--graphite);border-color:var(--graphite)}
.nav-toggle[data-open] span{background:var(--volt)}
.nav-toggle[data-open] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[data-open] span:nth-child(2){opacity:0}
.nav-toggle[data-open] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== 共享页脚 ===== */
.site-footer{
  position:relative;overflow:hidden;
  margin-top:clamp(2.5rem,6vw,5rem);
  background:
    radial-gradient(120% 90% at 88% 0%,rgba(31,42,68,.85),transparent 62%),
    var(--graphite);
  color:var(--silver);
  font-size:.9rem;
}
.footer-strike{height:10px;background:repeating-linear-gradient(115deg,var(--track-red) 0 10px,#0f1115 10px 30px)}
.footer-shell{width:var(--shell);margin-inline:auto;padding:clamp(2rem,5vw,3.25rem) 0 1.25rem}
.footer-top{
  display:grid;grid-template-columns:minmax(200px,.8fr) minmax(0,2.6fr);
  gap:clamp(1.5rem,4vw,3rem);align-items:start;
  padding-bottom:clamp(1.5rem,4vw,2.5rem);
  border-bottom:1px solid var(--on-dark);
}
.footer-brand{display:block}
.footer-mark{
  display:inline-block;text-decoration:none;
  font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,3vw,2rem);
  line-height:1;letter-spacing:-.02em;color:var(--paper);
  transition:color .16s ease;
}
.footer-mark:hover{color:var(--volt)}
.footer-line{margin-top:.6rem;max-width:26ch;font-size:.85rem;line-height:1.65;color:rgba(199,205,212,.9)}
.footer-line--mono{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.22em;color:rgba(199,205,212,.55);max-width:none}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:1.5rem 1.25rem}
.footer-col{min-width:0}
.footer-head{
  position:relative;
  font-family:var(--font-mono);font-size:.66rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper);
  margin:0 0 .75rem;padding-bottom:.55rem;
  border-bottom:1px solid rgba(201,47,36,.6);
}
.footer-head::before{content:"";position:absolute;left:0;bottom:-1px;width:28px;height:1px;background:var(--volt)}
.footer-list{display:grid;gap:.42rem}
.footer-link{
  display:inline-block;color:var(--silver);text-decoration:none;
  font-size:.85rem;line-height:1.5;
  transition:color .16s ease,transform .16s ease;
}
.footer-link:hover{color:var(--paper);transform:translateX(3px)}
.footer-link:focus-visible{outline-offset:2px}
.footer-contact{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:.55rem 1.5rem;
  margin-top:clamp(1.5rem,4vw,2.25rem);
  padding:clamp(1rem,3vw,1.5rem);
  border:1px solid var(--on-dark);border-radius:18px;
  background:linear-gradient(140deg,rgba(31,42,68,.6),rgba(22,24,29,.15));
}
.footer-contact > .footer-head{grid-column:1/-1;margin-bottom:.15rem}
.contact-item{
  display:flex;flex-wrap:wrap;gap:.45rem;align-items:baseline;
  font-size:.84rem;line-height:1.6;color:var(--paper);overflow-wrap:anywhere;
}
.contact-key{flex:none;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;color:var(--neon)}
.contact-note{font-size:.76rem;line-height:1.7;color:rgba(199,205,212,.78)}
.footer-cta{
  grid-column:1/-1;justify-self:start;margin-top:.25rem;text-decoration:none;
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;
  background:var(--volt);color:var(--graphite);
  padding:.6rem 1rem;border-radius:999px;
  transition:background-color .16s ease,transform .16s ease;
}
.footer-cta:hover{background:var(--neon);transform:translateY(-1px)}
.footer-legal{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.75rem 1.5rem;
  margin-top:clamp(1.25rem,3vw,2rem);padding-top:1rem;
  border-top:1px solid var(--on-dark);
}
.legal-links{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem}
.legal-link{font-size:.78rem;color:var(--silver);text-decoration:none;border-bottom:1px solid transparent;transition:color .16s ease,border-color .16s ease}
.legal-link:hover{color:var(--volt);border-bottom-color:var(--volt)}
.legal-meta{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;color:rgba(199,205,212,.7)}
.to-top{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;cursor:pointer;
  background:transparent;color:var(--paper);
  border:1px solid rgba(244,239,231,.38);border-radius:999px;
  padding:.45rem .9rem;
  transition:border-color .16s ease,color .16s ease,background-color .16s ease;
}
.to-top:hover{border-color:var(--neon);color:var(--neon);background:rgba(54,224,208,.08)}

/* ===== 响应式 ===== */
@media (max-width:1079px){
  .nav-toggle{display:flex}
  .nav-panel{
    position:absolute;top:calc(100% + .55rem);left:0;right:0;z-index:130;
    display:none;
    background:var(--paper);border:1px solid var(--graphite);border-radius:24px;
    padding:.6rem;
    box-shadow:0 30px 46px -26px rgba(22,24,29,1);
    max-height:min(72vh,540px);overflow:auto;
    justify-content:flex-start;
  }
  .nav-panel[data-open]{display:block}
  .nav-list{flex-direction:column;align-items:stretch;gap:.15rem}
  .nav-link{justify-content:flex-start;padding:.72rem .85rem;border-radius:14px;font-size:.95rem}
  .nav-link[aria-current="page"]{box-shadow:inset 3px 0 0 var(--track-red)}
  .nav-link[aria-current="page"] .nav-idx{color:var(--volt)}
  .header-island{padding-left:.85rem}
  .footer-top{grid-template-columns:minmax(0,1fr)}
  .split{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .console-bar > .console-key:first-child{display:none}
  .footer-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}
@media (max-width:767px){
  .header-cta{display:none}
  .nav-cta{
    display:flex;justify-content:center;align-items:center;
    margin-top:.55rem;padding:.8rem;border-radius:14px;text-decoration:none;
    background:var(--track-red);color:#fff;
    font-family:var(--font-mono);font-size:.8rem;letter-spacing:.04em;
  }
  .footer-line{max-width:34ch}
  .island-wrap{margin-top:-1.1rem}
  .header-island{padding:.35rem .4rem .35rem .8rem;gap:.4rem}
}
@media (max-width:520px){
  .brand-tag{display:none}
  .brand-mark{font-size:1.02rem}
  .console-key{font-size:.58rem;letter-spacing:.12em}
  .chip{font-size:.66rem;padding:.38rem .55rem}
  .console-launch{font-size:.66rem;padding:.42rem .68rem}
  .footer-legal{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .btn:hover,.chip:hover,.console-launch:hover,.footer-link:hover,.footer-cta:hover{transform:none}
  .scroll-rail{transition:none}
}