:root{
  --deep:#061725;
  --hull:#0B2537;
  --steel:#123B52;
  --cyan:#17E0C8;
  --cyan-soft:#7CF3E4;
  --silver:#C9D6DF;
  --white:#F2F6F8;
  --amber:#FFB020;
  --mist:#7A8FA0;
  --grid:#1E4257;
  --line:rgba(30,66,87,.55);
  --rail:1280px;
  --gutter:24px;
  --font-display:"PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
  --font-body:var(--font-display);
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Roboto Mono","Courier New",monospace;
  --ease:cubic-bezier(.2,.7,.3,1);
}
*,*::before,*::after{box-sizing:border-box;}
html{margin:0;padding:0;background:var(--deep);scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  min-height:100%;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.75;
  color:var(--silver);
  background-color:var(--deep);
  background-image:
    radial-gradient(120% 70% at 82% -10%, rgba(23,224,200,.10), transparent 62%),
    linear-gradient(to right, rgba(30,66,87,.30) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(30,66,87,.30) 1px, transparent 1px);
  background-size:auto,96px 96px,96px 96px;
  background-repeat:no-repeat,repeat,repeat;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:900;line-height:1.02;letter-spacing:-.015em;color:var(--white);margin:0;}
h1{font-size:clamp(44px,7vw,88px);}
h2{font-size:clamp(32px,4.2vw,64px);}
h3{font-size:clamp(22px,2.4vw,32px);line-height:1.15;}
h4{font-size:clamp(18px,1.8vw,22px);line-height:1.3;}
p{margin:0 0 1.2em;}
p:last-child{margin-bottom:0;}
a{color:var(--cyan);text-decoration:none;transition:color .18s var(--ease),border-color .18s var(--ease);}
a:hover{color:var(--cyan-soft);}
ul,ol{margin:0;padding:0;}
img{max-width:100%;height:auto;}
strong{color:var(--white);font-weight:700;}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;}
.skip-link{position:absolute;left:16px;top:-72px;z-index:120;padding:10px 18px;background:var(--cyan);color:#04141f;font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.1em;transition:top .18s var(--ease);}
.skip-link:focus{top:12px;color:#04141f;}

/* ---------- 页头 ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(6,23,37,.94);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.header-rail{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;max-width:var(--rail);margin-inline:auto;padding:14px var(--gutter);min-height:74px;}
.brand{display:inline-flex;align-items:center;gap:14px;color:var(--white);text-decoration:none;}
.brand:hover{color:var(--white);}
.brand-mark{font-size:20px;font-weight:900;letter-spacing:.14em;line-height:1;white-space:nowrap;}
.brand-meta{display:inline-flex;align-items:center;gap:8px;padding-left:14px;border-left:1px solid var(--steel);}
.brand-dot{flex:none;width:7px;height:7px;background:var(--amber);box-shadow:0 0 0 3px rgba(255,176,32,.14);animation:beat 3s ease-in-out infinite;}
.brand-beat{font-family:var(--font-mono);font-size:11px;line-height:1;letter-spacing:.14em;color:var(--mist);white-space:nowrap;}
@keyframes beat{0%,100%{opacity:1;box-shadow:0 0 0 3px rgba(255,176,32,.14);}50%{opacity:.55;box-shadow:0 0 0 6px rgba(255,176,32,.04);}}
.header-cta{justify-self:center;display:inline-flex;align-items:center;gap:10px;padding:11px 20px;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--cyan);background:rgba(23,224,200,.07);border:1px solid var(--steel);text-decoration:none;white-space:nowrap;transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);}
.header-cta::after{content:"\2192";font-family:var(--font-mono);font-size:13px;line-height:1;transition:transform .18s var(--ease);}
.header-cta:hover,.header-cta:focus-visible{background:var(--cyan);border-color:var(--cyan);color:#04141f;}
.header-cta:hover::after{transform:translateX(3px);}
.site-nav{justify-self:end;}
.nav-list{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;}
.nav-item{position:relative;}
.nav-link{position:relative;display:inline-block;padding:6px 0;font-size:14px;letter-spacing:.04em;color:var(--silver);text-decoration:none;white-space:nowrap;}
.nav-link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--cyan);transition:width .18s var(--ease);}
.nav-link:hover{color:var(--white);}
.nav-link:hover::after{width:100%;}
.nav-link[aria-current="page"]{color:var(--cyan);}
.nav-link[aria-current="page"]::after{width:100%;background:var(--cyan);}
.nav-toggle{display:none;align-items:center;gap:10px;justify-self:end;padding:10px 12px;background:transparent;border:1px solid var(--steel);color:var(--silver);font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;cursor:pointer;transition:border-color .18s var(--ease),color .18s var(--ease);}
.nav-toggle:hover{border-color:var(--cyan);color:var(--cyan);}
.nav-toggle-bars{position:relative;display:block;flex:none;width:18px;height:2px;background:currentColor;transition:background .18s var(--ease);}
.nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;transition:transform .18s var(--ease);}
.nav-toggle-bars::before{top:-6px;}
.nav-toggle-bars::after{top:6px;}
.site-header[data-open="true"] .nav-toggle-bars{background:transparent;}
.site-header[data-open="true"] .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg);}
.site-header[data-open="true"] .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg);}

/* ---------- 页脚 ---------- */
.site-footer{position:relative;margin-top:80px;background:linear-gradient(180deg,rgba(11,37,55,.96) 0%,#04121d 72%);border-top:1px solid var(--steel);color:var(--silver);}
.site-footer::before{content:"";display:block;height:2px;background:linear-gradient(90deg,var(--cyan) 0%,rgba(23,224,200,.18) 34%,transparent 68%);}
.footer-rail{max-width:var(--rail);margin-inline:auto;padding:52px var(--gutter) 28px;}
.footer-brand{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;padding-bottom:24px;}
.footer-brand-mark{margin:0;font-size:22px;font-weight:900;letter-spacing:.16em;line-height:1.2;color:var(--white);}
.footer-brand-note{margin:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:var(--amber);}
.footer-domain{margin:0 0 0 auto;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--mist);}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);}
.footer-col{padding:26px 22px 0;border-left:1px solid var(--line);}
.footer-col:first-child{padding-left:0;border-left:0;}
.footer-col:last-child{padding-right:0;}
.footer-col-title{margin:0 0 14px;font-family:var(--font-mono);font-size:11px;font-weight:600;line-height:1.6;letter-spacing:.26em;color:var(--mist);}
.footer-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.footer-link{position:relative;display:inline-block;font-size:14px;line-height:1.6;color:var(--silver);text-decoration:none;}
.footer-link::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--cyan);transition:width .18s var(--ease);}
.footer-link:hover{color:var(--cyan);}
.footer-link:hover::after{width:100%;}
.footer-text{margin:0;font-family:var(--font-mono);font-size:13px;line-height:1.7;letter-spacing:.02em;color:var(--silver);overflow-wrap:anywhere;}
.footer-legal{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin-top:32px;padding-top:18px;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--mist);}
.footer-copy{color:var(--mist);}
.footer-icp{color:var(--silver);}
.footer-mono{margin-left:auto;color:var(--mist);}

/* ---------- 通用容器与组件 ---------- */
.shell{width:100%;max-width:var(--rail);margin-inline:auto;padding:0 var(--gutter);}
.shell--tight{max-width:920px;}
.panel{position:relative;background:var(--hull);border:1px solid var(--steel);padding:26px;transition:border-color .18s var(--ease);}
.panel:hover,.panel:focus-within{border-color:var(--cyan);}
.panel--quiet{background:transparent;border-color:var(--line);}
.section-rule{border:0;height:1px;background:var(--line);margin:0;}
.eyebrow{display:block;margin:0 0 12px;font-family:var(--font-mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--cyan);}
.mono{font-family:var(--font-mono);font-size:13px;letter-spacing:.14em;color:var(--mist);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;font-family:var(--font-body);font-size:14px;font-weight:700;letter-spacing:.06em;line-height:1.2;border:1px solid transparent;border-radius:0;background:none;color:var(--cyan);cursor:pointer;text-decoration:none;transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);}
.btn--primary{background:var(--cyan);border-color:var(--cyan);color:#04141f;}
.btn--primary:hover,.btn--primary:focus-visible{background:var(--cyan-soft);border-color:var(--cyan-soft);color:#04141f;}
.btn--ghost{border-color:var(--steel);color:var(--cyan);background:transparent;}
.btn--ghost:hover,.btn--ghost:focus-visible{border-color:var(--cyan);background:rgba(23,224,200,.08);color:var(--cyan-soft);}
.breadcrumb{padding:22px 0 0;}
.breadcrumb-list{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--mist);}
.breadcrumb-item{display:inline-flex;align-items:center;}
.breadcrumb-item + .breadcrumb-item::before{content:"/";padding:0 10px;color:var(--steel);}
.breadcrumb-link{color:var(--mist);text-decoration:none;}
.breadcrumb-link:hover{color:var(--cyan);}
.breadcrumb-current{color:var(--silver);}
.grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);}
.grid-12 > *{min-width:0;}
.span-4{grid-column:span 4;}
.span-5{grid-column:span 5;}
.span-6{grid-column:span 6;}
.span-7{grid-column:span 7;}
.span-8{grid-column:span 8;}
.span-12{grid-column:span 12;}
.prose{max-width:68ch;font-size:17px;line-height:1.75;}
.prose h2{margin:1.6em 0 .5em;font-size:clamp(26px,3vw,40px);}
.prose h3{margin:1.4em 0 .4em;}
.prose ul{list-style:none;padding:0;margin:0 0 1.2em;}
.prose li{position:relative;padding-left:20px;margin-bottom:.6em;}
.prose li::before{content:"";position:absolute;left:0;top:.78em;width:8px;height:1px;background:var(--cyan);}
.prose a{border-bottom:1px solid rgba(23,224,200,.4);}
.prose a:hover{border-bottom-color:var(--cyan-soft);}

/* ---------- 图片容器 ---------- */
.media-frame{position:relative;display:block;background:var(--hull);border:1px solid var(--steel);overflow:hidden;aspect-ratio:16/10;transition:border-color .18s var(--ease);}
.media-frame img{display:block;width:100%;height:100%;object-fit:cover;}
.media-frame:hover{border-color:var(--cyan);}
.media-frame--wide{aspect-ratio:21/9;}
.media-frame--tall{aspect-ratio:4/5;}
.media-frame--square{aspect-ratio:1/1;}
.media-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;}
.media-caption{margin-top:10px;font-size:13px;line-height:1.6;color:var(--mist);}

/* ---------- 时间轴 / 索引 / 复制 ---------- */
.timeline{display:flex;gap:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;border-top:1px solid var(--steel);padding:0;}
.timeline-item{flex:0 0 clamp(220px,26vw,300px);scroll-snap-align:start;padding:22px 24px 26px 0;border-right:1px solid var(--line);}
.timeline-item:last-child{border-right:0;}
.timeline-index{display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;color:var(--amber);}
.timeline-title{margin:10px 0 6px;font-size:18px;font-weight:800;line-height:1.3;color:var(--white);}
.timeline-note{margin:0;font-size:13px;line-height:1.6;color:var(--mist);}
.toc-link{display:block;padding:8px 0 8px 14px;border-left:1px solid var(--steel);font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:var(--mist);text-decoration:none;transition:color .18s var(--ease),border-color .18s var(--ease);}
.toc-link:hover,.toc-link[aria-current="true"]{color:var(--cyan);border-left-color:var(--cyan);}
.copy-tag{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;color:var(--cyan);background:rgba(23,224,200,.08);border:1px solid var(--steel);cursor:pointer;transition:border-color .18s var(--ease),color .18s var(--ease);}
.copy-tag:hover{border-color:var(--cyan);}
.copy-tag[data-copied="true"]{border-color:var(--amber);color:var(--amber);}
.copy-tag[data-copied="true"]::after{content:"已复制";font-size:11px;letter-spacing:.06em;}
.read-progress{position:fixed;top:0;left:0;z-index:90;height:2px;width:0;background:linear-gradient(90deg,var(--cyan),var(--cyan-soft));pointer-events:none;}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .header-rail{grid-template-columns:auto 1fr auto;gap:12px;padding:12px var(--gutter);min-height:66px;}
  .header-cta{justify-self:end;padding:9px 14px;font-size:12px;}
  .nav-toggle{display:inline-flex;}
  .site-nav{position:absolute;left:0;right:0;top:100%;display:none;justify-self:stretch;background:var(--hull);border-top:1px solid var(--steel);border-bottom:1px solid var(--steel);padding:6px var(--gutter) 22px;max-height:calc(100vh - 66px);overflow-y:auto;}
  .site-header[data-open="true"] .site-nav{display:block;}
  .nav-list{flex-direction:column;align-items:stretch;gap:0;}
  .nav-item{border-bottom:1px solid var(--line);}
  .nav-item:last-child{border-bottom:0;}
  .nav-link{display:flex;justify-content:space-between;padding:15px 0;font-size:16px;}
  .nav-link::after{display:none;}
  .span-4,.span-5,.span-6,.span-7,.span-8{grid-column:span 12;}
  .footer-grid{grid-template-columns:repeat(2,1fr);}
  .footer-col{padding:22px 20px 0;border-left:1px solid var(--line);}
  .footer-col:nth-child(odd){padding-left:0;border-left:0;}
  .footer-col:nth-child(even){padding-left:20px;padding-right:0;}
  .footer-col:nth-child(n+3){margin-top:22px;border-top:1px solid var(--line);}
}
@media (max-width:720px){
  .brand-meta{display:none;}
  .header-cta{font-size:11px;padding:8px 10px;letter-spacing:.02em;}
  .nav-toggle-text{display:none;}
  .brand-mark{font-size:18px;letter-spacing:.1em;}
  .footer-legal{gap:8px 16px;}
  .footer-mono{margin-left:0;}
}
@media (max-width:600px){
  .footer-grid{grid-template-columns:1fr;}
  .footer-col,
  .footer-col:nth-child(odd),
  .footer-col:nth-child(even){padding:20px 0 0;border-left:0;}
  .footer-col:nth-child(n+2){border-top:1px solid var(--line);}
  .footer-col:nth-child(n+3){margin-top:0;}
  .footer-col:first-child{padding-top:24px;}
  .footer-domain{margin-left:0;}
  .footer-rail{padding:40px var(--gutter) 24px;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .brand-dot{animation:none;}
}