:root{
  --ink-950:#071A2B;
  --ink-800:#0D2A40;
  --cyan-500:#1FF2D1;
  --cyan-700:#0BB7A0;
  --orange-500:#FF8A3D;
  --gold-400:#D9B36C;
  --paper-050:#F4F7FA;
  --slate-400:#8FA9BD;
  --teal-900:#0B4F5A;
  --ink-990:#03101C;

  --bg:var(--ink-950);
  --fg:var(--paper-050);
  --soft:#C6D6E3;
  --muted:#8FA9BD;

  --rail-w:224px;
  --bar-h:72px;
  --frame-offset:var(--rail-w);
  --pad-x:clamp(1.15rem,3vw,2.75rem);

  --r-lg:28px;
  --r-md:18px;
  --r-sm:14px;
  --r-pill:999px;

  --font-display:"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  padding-top:var(--bar-h);
  padding-left:var(--frame-offset);
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:17px;
  font-weight:400;
  line-height:1.85;
  letter-spacing:.008em;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(62% 46% at 82% -10%, rgba(31,242,209,.11), transparent 70%),
    radial-gradient(46% 40% at 4% 98%, rgba(255,138,61,.09), transparent 72%);
}
h1,h2,h3,h4{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.02em;
  text-wrap:balance;
}
h1{font-size:clamp(2.4rem,6vw,5rem)}
h2{font-size:clamp(1.85rem,3.6vw,3rem)}
h3{font-size:clamp(1.22rem,2vw,1.68rem);line-height:1.22;letter-spacing:-.01em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
b,strong{font-weight:700}
:focus-visible{outline:2px solid var(--cyan-500);outline-offset:3px;border-radius:8px}

/* ---------- 共享排版与结构组件 ---------- */
.container{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--pad-x)}
.section{padding-block:clamp(2.7rem,5vw,4.6rem);position:relative}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  margin:0 0 1rem;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cyan-500);
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--cyan-500)}
.lede{max-width:40em;font-size:clamp(1.02rem,1.4vw,1.18rem);line-height:1.85;color:var(--soft)}
.rule{height:1px;border:0;margin:0;background:linear-gradient(90deg,rgba(31,242,209,.5),rgba(143,169,189,.12) 62%,transparent)}
.chapter-mark{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;
  color:#7E96A8;transition:color .18s ease;
}
[data-chapter]{scroll-margin-top:calc(var(--bar-h) + 1.6rem)}
[data-chapter].is-current .chapter-mark{color:var(--cyan-500)}

.data-num{
  font-family:var(--font-mono);font-weight:700;
  font-variant-numeric:tabular-nums;
  font-size:clamp(2.6rem,6vw,5.4rem);
  line-height:1;letter-spacing:-.03em;
  color:var(--orange-500);display:block;
}
.surface{
  border:1px solid rgba(143,169,189,.18);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(13,42,64,.86),rgba(7,26,43,.62));
}
.pill{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.3rem .8rem;border-radius:var(--r-pill);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;
  color:#A9BECD;background:rgba(13,42,64,.62);
  border:1px solid rgba(143,169,189,.32);
}
.pill--cyan{border-color:rgba(31,242,209,.42);color:var(--cyan-500);background:rgba(31,242,209,.1)}
.pill--orange{border-color:rgba(255,138,61,.46);color:var(--orange-500);background:rgba(255,138,61,.1)}
.pill--gold{border-color:rgba(217,179,108,.46);color:var(--gold-400);background:rgba(217,179,108,.1)}
.tag-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}

.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  padding:0;margin:0;list-style:none;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;color:#7E96A8;
}
.breadcrumb li{display:flex;align-items:center;gap:.5rem}
.breadcrumb li + li::before{content:"/";color:rgba(143,169,189,.5)}
.breadcrumb a{color:#A9BECD;text-decoration:none;transition:color .16s ease}
.breadcrumb a:hover{color:var(--cyan-500)}
.breadcrumb [aria-current="page"]{color:var(--cyan-500)}

.grid{display:grid;gap:clamp(1rem,2vw,1.8rem)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

.media-frame{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  aspect-ratio:16/9;
  background:
    repeating-linear-gradient(45deg,rgba(31,242,209,.07) 0 1px,transparent 1px 14px),
    linear-gradient(150deg,var(--ink-800),var(--teal-900) 58%,var(--ink-950));
  border:1px solid rgba(143,169,189,.16);
}
.media-frame img{width:100%;height:100%;object-fit:cover}
.media-frame--wide{aspect-ratio:21/9}
.media-frame--tall{aspect-ratio:4/5}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.72rem 1.25rem;border-radius:var(--r-pill);
  border:1px solid transparent;
  font-family:var(--font-body);font-size:.9rem;font-weight:700;line-height:1.2;
  letter-spacing:.02em;white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .16s ease,box-shadow .18s ease;
}
.btn--primary{
  background:var(--orange-500);color:#1B0B02;border-color:var(--orange-500);
  box-shadow:0 10px 26px -16px rgba(255,138,61,.95);
}
.btn--primary:hover{background:#FFA162;border-color:#FFA162}
.btn--ghost{background:transparent;color:var(--cyan-500);border-color:rgba(31,242,209,.45)}
.btn--ghost:hover{background:rgba(31,242,209,.12);border-color:var(--cyan-500)}
.btn--quiet{background:rgba(244,247,250,.08);color:var(--paper-050);border-color:rgba(143,169,189,.3)}
.btn--quiet:hover{background:rgba(244,247,250,.15);border-color:rgba(143,169,189,.52)}
.btn--sm{padding:.5rem .95rem;font-size:.82rem}

/* ---------- 头部 ---------- */
.site-header{display:block}
.skip-link{
  position:fixed;top:0;left:0;z-index:220;
  padding:.72rem 1.15rem;
  border-radius:0 0 14px 0;
  background:var(--cyan-500);color:var(--ink-950);
  font-size:.88rem;font-weight:700;text-decoration:none;
  transform:translateY(-130%);
  transition:transform .16s ease;
}
.skip-link:focus,.skip-link:focus-visible{transform:none}

.site-frame{
  position:fixed;
  inset:0 auto 0 0;
  z-index:80;
  width:var(--rail-w);
  display:flex;
  flex-direction:column;
  gap:1.4rem;
  padding:1.5rem 1.05rem 1.3rem;
  overflow-y:auto;
  overscroll-behavior:contain;
  color:var(--paper-050);
  border-right:1px solid rgba(143,169,189,.22);
  background:
    repeating-linear-gradient(90deg,rgba(31,242,209,.055) 0 1px,transparent 1px 46px),
    linear-gradient(180deg,#0A2439 0%,#071A2B 46%,#050E19 100%);
}

.brand{display:flex;align-items:center;gap:.7rem;padding:.15rem .2rem}
.brand-mark{
  position:relative;flex:0 0 38px;width:38px;height:38px;
  border-radius:12px;
  background:linear-gradient(140deg,var(--cyan-500),var(--teal-900));
  box-shadow:inset 0 0 0 1px rgba(31,242,209,.4);
}
.brand-mark::before{
  content:"";position:absolute;inset:9px;border-radius:6px;
  border:2px solid rgba(7,26,43,.55);
}
.brand-mark::after{
  content:"";position:absolute;right:7px;bottom:7px;width:8px;height:8px;border-radius:50%;
  background:var(--orange-500);box-shadow:0 0 10px rgba(255,138,61,.85);
}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-name{font-family:var(--font-display);font-size:1.02rem;font-weight:800;letter-spacing:.02em}
.brand-latin{
  margin-top:.32rem;font-family:var(--font-mono);
  font-size:.6rem;letter-spacing:.32em;color:var(--cyan-500);
}
.brand-tagline{
  padding:.1rem 0 .1rem .62rem;
  border-left:2px solid var(--gold-400);
  font-size:.76rem;line-height:1.65;color:rgba(143,169,189,.92);
}

.frame-nav{margin-top:.1rem}
.nav-caption{
  margin:0 0 .55rem;padding:0 .7rem;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(143,169,189,.75);
}
.frame-nav-list{display:flex;flex-direction:column;gap:.28rem}
.nav-link{
  display:flex;align-items:baseline;gap:.62rem;
  padding:.62rem .7rem;border-radius:var(--r-sm);
  border:1px solid transparent;
  color:#A9BECD;font-size:.92rem;line-height:1.35;
  transition:color .18s ease,background-color .18s ease,border-color .18s ease;
}
.nav-idx{
  flex:0 0 auto;font-family:var(--font-mono);
  font-size:.66rem;letter-spacing:.08em;color:rgba(143,169,189,.62);
}
.nav-label{font-weight:500}
.nav-link:hover{color:var(--paper-050);background:rgba(31,242,209,.08);border-color:rgba(31,242,209,.24)}
.nav-link:hover .nav-idx{color:var(--cyan-500)}
.nav-link[aria-current="page"]{
  color:var(--cyan-500);font-weight:700;
  background:linear-gradient(90deg,rgba(31,242,209,.17),rgba(31,242,209,.02));
  border-color:rgba(31,242,209,.32);
}
.nav-link[aria-current="page"] .nav-idx{color:var(--orange-500)}
.nav-link[aria-current="page"] .nav-label{font-weight:700}

.rail-foot{
  margin-top:auto;
  padding-top:1rem;
  border-top:1px solid rgba(143,169,189,.18);
  display:flex;flex-direction:column;gap:.45rem;
}
.rail-foot-line{
  margin:0;font-family:var(--font-mono);
  font-size:.66rem;letter-spacing:.13em;color:var(--gold-400);
}
.rail-foot-link{
  align-self:flex-start;font-size:.78rem;color:var(--slate-400);
  border-bottom:1px solid transparent;
  transition:color .16s ease,border-color .16s ease;
}
.rail-foot-link:hover{color:var(--cyan-500);border-bottom-color:rgba(31,242,209,.5)}

.frame-bar{
  position:fixed;
  top:0;left:var(--frame-offset);right:0;
  z-index:70;
  height:var(--bar-h);
  display:flex;align-items:center;gap:.85rem;
  padding:0 clamp(1rem,2.2vw,2rem);
  border-bottom:1px solid rgba(143,169,189,.22);
  background:rgba(7,26,43,.9);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.nav-toggle{
  display:none;
  width:44px;height:44px;flex:0 0 44px;
  align-items:center;justify-content:center;
  border-radius:var(--r-sm);
  border:1px solid rgba(143,169,189,.32);
  background:rgba(13,42,64,.82);
  cursor:pointer;
}
.nav-toggle-icon{
  position:relative;display:block;width:18px;height:2px;
  background:var(--paper-050);border-radius:2px;
  transition:background-color .16s ease;
}
.nav-toggle-icon::before,
.nav-toggle-icon::after{
  content:"";position:absolute;left:0;width:18px;height:2px;
  background:var(--paper-050);border-radius:2px;
  transition:transform .18s ease,top .18s ease;
}
.nav-toggle-icon::before{top:-6px}
.nav-toggle-icon::after{top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after{top:0;transform:rotate(-45deg)}

.bar-brand{
  display:none;
  font-family:var(--font-display);font-size:.98rem;font-weight:800;
  letter-spacing:.02em;color:var(--paper-050);
}
.bar-note{
  margin:0;font-family:var(--font-mono);
  font-size:.68rem;letter-spacing:.2em;color:rgba(143,169,189,.8);
  white-space:nowrap;
}
.frame-search{
  margin-left:auto;
  flex:0 1 420px;min-width:0;
  display:flex;align-items:center;gap:.65rem;
  padding:.52rem .55rem .52rem .95rem;
  border-radius:var(--r-pill);
  border:1px solid rgba(143,169,189,.28);
  background:rgba(13,42,64,.72);
  color:#9FB6C6;font-size:.86rem;line-height:1.4;
  transition:border-color .18s ease,background-color .18s ease,color .18s ease;
}
.frame-search:hover,.frame-search:focus-visible{
  border-color:rgba(31,242,209,.6);
  background:rgba(11,79,90,.5);
  color:var(--paper-050);
}
.frame-search-icon{
  position:relative;flex:0 0 13px;width:13px;height:13px;
  border-radius:50%;border:2px solid var(--cyan-500);
}
.frame-search-icon::after{
  content:"";position:absolute;right:-4px;bottom:-3px;
  width:6px;height:2px;border-radius:2px;
  background:var(--cyan-500);transform:rotate(45deg);
}
.frame-search-text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frame-search-hint{
  flex:0 0 auto;padding:.26rem .6rem;border-radius:var(--r-pill);
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;
  color:var(--cyan-500);background:rgba(31,242,209,.14);
  border:1px solid rgba(31,242,209,.3);
}
.frame-cta{flex:0 0 auto;padding:.64rem 1.15rem;font-size:.86rem}

.read-progress{
  position:absolute;left:0;right:0;bottom:-1px;
  height:2px;overflow:hidden;
  background:rgba(143,169,189,.18);
}
.read-progress-fill{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--cyan-500),var(--orange-500));
  transition:width .15s linear;
}

/* ---------- 页脚 ---------- */
.site-footer{
  position:relative;
  margin-left:calc(-1 * var(--frame-offset));
  padding-left:calc(var(--pad-x) + var(--frame-offset));
  padding-right:var(--pad-x);
  padding-top:clamp(2.6rem,5vw,4.4rem);
  overflow:hidden;
  color:#A9BECD;
  border-top:1px solid rgba(217,179,108,.3);
  background:linear-gradient(180deg,#050E19 0%,#03101C 58%,#03101C 100%);
}
.site-footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(143,169,189,.05) 0 1px,transparent 1px 64px);
}
.footer-main{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,1.3fr);
  gap:clamp(1.6rem,3vw,3rem);
  padding-bottom:clamp(2rem,4vw,3rem);
  border-bottom:1px solid rgba(143,169,189,.16);
}
.footer-brand{min-width:0}
.footer-wordmark{
  font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:800;line-height:1.1;letter-spacing:-.01em;color:var(--paper-050);
}
.footer-latin{
  margin-top:.5rem;font-family:var(--font-mono);
  font-size:.64rem;letter-spacing:.28em;color:var(--orange-500);
}
.footer-blurb{
  margin-top:1rem;max-width:22em;
  font-size:.86rem;line-height:1.8;color:#8FA9BD;
}
.footer-col{min-width:0}
.footer-heading{
  margin:0 0 .9rem;
  font-family:var(--font-mono);font-size:.66rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold-400);
}
.footer-links li + li{margin-top:.5rem}
.footer-links a{
  display:inline-block;padding:.16rem 0;
  font-size:.9rem;line-height:1.6;color:#B4C7D5;
  border-bottom:1px solid transparent;
  transition:color .16s ease,border-color .16s ease;
}
.footer-links a:hover,.footer-links a:focus-visible{color:var(--cyan-500);border-bottom-color:rgba(31,242,209,.5)}
.footer-contact-line{
  margin:0 0 .55rem;
  font-size:.85rem;line-height:1.75;color:#B4C7D5;
  overflow-wrap:anywhere;
}
.footer-contact-key{
  display:inline-block;margin-right:.55rem;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;
  color:var(--orange-500);
}
.footer-note{
  margin-top:.9rem;padding-left:.7rem;
  border-left:2px solid rgba(217,179,108,.5);
  font-size:.78rem;line-height:1.75;color:#7E96A8;
}
.footer-base{
  position:relative;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.6rem 1.4rem;
  padding:1.15rem 0 1.5rem;
}
.footer-legal,.footer-year{
  margin:0;font-family:var(--font-mono);
  font-size:.7rem;letter-spacing:.08em;color:#6E8698;
}

/* ---------- 响应式 ---------- */
@media (max-width:1023px){
  :root{--frame-offset:0px;--bar-h:64px}
  body{padding-left:0}
  .nav-toggle{display:inline-flex}
  .bar-brand{display:block;margin-right:auto}
  .frame-bar{left:0;gap:.6rem}
  .bar-note{display:none}
  .frame-search{flex:0 0 auto;margin-left:0;padding:.55rem;border-radius:var(--r-sm)}
  .frame-search-text,.frame-search-hint{display:none}
  .frame-search-icon{flex:0 0 16px;width:16px;height:16px}
  .frame-cta{padding:.58rem .95rem;font-size:.82rem}
  .site-frame{
    inset:var(--bar-h) auto 0 0;
    z-index:65;
    width:min(86vw,320px);
    transform:translateX(-103%);
    transition:transform .26s cubic-bezier(.45,0,.2,1);
    box-shadow:none;
  }
  .site-frame[data-open]{
    transform:none;
    box-shadow:0 26px 60px -22px rgba(0,0,0,.9);
  }
  body::after{
    content:"";position:fixed;inset:0;z-index:60;
    background:rgba(3,16,28,.66);
    opacity:0;pointer-events:none;
    transition:opacity .22s ease;
  }
  body[data-nav-open]::after{opacity:1;pointer-events:auto}

  .footer-main{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  body{font-size:16px;line-height:1.8}
  .grid--2,.grid--3{grid-template-columns:minmax(0,1fr)}
  .footer-main{grid-template-columns:minmax(0,1fr);gap:1.8rem}
  .footer-base{flex-direction:column;align-items:flex-start}
}
@media (max-width:480px){
  .frame-cta{display:none}
  .read-progress{height:2px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .read-progress-fill{transition:none}
}