.page-home{
  --home-cut:16px;
  background:var(--ink-900);
  color:var(--paper-100);
  padding-bottom:clamp(24px,4vw,48px);
}
.page-home .sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.page-home h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.5rem,3vw,2.35rem);
  line-height:1.18;
  letter-spacing:-.01em;
  margin:0 0 12px;
  color:var(--paper-100);
}
.page-home .mono{font-family:var(--font-mono);}
.page-home .link{
  color:var(--cyan-400);
  text-decoration:none;
  border-bottom:1px solid rgba(43,227,210,.35);
  padding-bottom:1px;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.page-home .link:hover,
.page-home .link:focus-visible{color:var(--amber-500);border-color:rgba(244,183,64,.66);}
.page-home .breadcrumbs{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;
  color:var(--slate-300);
  padding:14px 0 4px;
}
.page-home .breadcrumbs a{color:var(--cyan-200);text-decoration:none;}
.page-home .breadcrumbs a:hover{color:var(--amber-500);background:none;}
.page-home .breadcrumbs [aria-current="page"]{color:var(--slate-300);}

/* ---------- 首屏 ---------- */
.page-home .hero{padding:clamp(10px,2vw,20px) 0 clamp(30px,4.5vw,56px);}
.page-home .hero__inner{display:grid;gap:clamp(18px,3vw,30px);}
.page-home .rail-wrap{
  border-left:1px solid var(--line-soft);
  padding-left:16px;
}
.page-home .rail-wrap .eyebrow{margin:0 0 10px;}
.page-home .rail{list-style:none;margin:0;padding:0;position:relative;}
.page-home .rail::before{
  content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;
  background:linear-gradient(180deg,rgba(43,227,210,.5),rgba(216,76,240,.5));
}
.page-home .rail__item{
  position:relative;display:block;
  padding:8px 0 8px 24px;
  border-bottom:1px solid var(--line-soft);
}
.page-home .rail__item:last-child{border-bottom:0;}
.page-home .rail__item::before{
  content:"";position:absolute;left:0;top:13px;
  width:11px;height:11px;border-radius:50%;
  border:1px solid var(--cyan-400);background:var(--ink-900);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.page-home .rail__item--last::before{border-color:var(--amber-500);}
.page-home .rail__item:hover::before{background:var(--amber-500);border-color:var(--amber-500);}
.page-home .rail__code{
  display:block;font-family:var(--font-mono);font-size:12px;font-weight:600;
  letter-spacing:.08em;color:var(--cyan-200);
}
.page-home .rail__item--last .rail__code{color:var(--amber-500);}
.page-home .rail__label{display:block;font-size:13px;color:var(--paper-100);margin-top:2px;}
.page-home .rail__tip{
  display:block;font-size:12px;line-height:1.6;color:var(--slate-300);margin-top:4px;
  transition:opacity var(--dur) var(--ease),max-height var(--dur) var(--ease);
}
@media (hover:hover) and (min-width:900px){
  .page-home .rail__tip{max-height:0;opacity:0;overflow:hidden;}
  .page-home .rail__item:hover .rail__tip,
  .page-home .rail__item:focus-within .rail__tip{max-height:80px;opacity:1;}
}

.page-home .hero__panel{
  position:relative;padding:1px;
  background:linear-gradient(140deg,rgba(43,227,210,.55),rgba(43,227,210,.1) 48%,rgba(216,76,240,.5));
  clip-path:polygon(0 22px,22px 0,100% 0,100% calc(100% - 40px),calc(100% - 40px) 100%,0 100%);
}
.page-home .hero__panel-inner{
  position:relative;overflow:hidden;height:100%;
  background:var(--ink-800);
  clip-path:polygon(0 21px,21px 0,100% 0,100% calc(100% - 39px),calc(100% - 39px) 100%,0 100%);
}
.page-home .hero__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.28;max-width:100%;
}
.page-home .hero__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(112deg,rgba(6,16,30,.95) 10%,rgba(6,16,30,.66) 58%,rgba(6,16,30,.9)),
    repeating-linear-gradient(90deg,rgba(185,201,218,.06) 0 1px,transparent 1px 44px);
}
.page-home .hero__body{
  position:relative;z-index:2;
  padding:clamp(24px,4vw,52px);
}
.page-home .hero__body .eyebrow{margin:0 0 10px;color:var(--cyan-200);}
.page-home .hero h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2rem,5.4vw,3.6rem);
  line-height:1.06;
  letter-spacing:-.015em;
  margin:0 0 16px;
  color:var(--paper-100);
}
.page-home .hero__lead{
  max-width:54ch;margin:0;
  font-size:clamp(15px,1.6vw,17px);
  line-height:1.78;color:var(--slate-300);
}
.page-home .hero__actions{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  margin-top:clamp(20px,3vw,30px);
}
.page-home .hero__cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;font-size:16px;font-weight:700;letter-spacing:.02em;
  text-decoration:none;
  box-shadow:0 0 0 1px rgba(244,183,64,.45),0 14px 32px rgba(244,183,64,.16);
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.page-home .hero__cta:hover,
.page-home .hero__cta:focus-visible{
  box-shadow:0 0 0 1px var(--amber-300),0 18px 38px rgba(244,183,64,.26);
  transform:translateY(-1px);
}
.page-home .hero__cta .arrow{display:inline-block;transition:transform var(--dur) var(--ease);}
.page-home .hero__cta:hover .arrow,
.page-home .hero__cta:focus-visible .arrow{transform:translateX(2px);}

.page-home .hero__switch{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin-top:clamp(20px,3vw,28px);padding-top:18px;
  border-top:1px solid var(--line-soft);
}
.page-home .version-switch__label{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-300);
}
.page-home .version-switch{
  display:inline-flex;gap:4px;padding:4px;
  border:1px solid var(--line);background:rgba(6,16,30,.72);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);
}
.page-home .version-btn{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;
  padding:8px 13px;border:0;background:transparent;color:var(--slate-300);
  cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.page-home .version-btn:hover{color:var(--cyan-200);background:rgba(43,227,210,.08);}
.page-home .version-btn[aria-pressed="true"]{
  background:rgba(43,227,210,.14);color:var(--cyan-200);
  box-shadow:inset 0 -2px 0 var(--magenta-500);
}
.page-home .hero__back{
  font-size:13px;color:var(--slate-300);text-decoration:none;
  border-bottom:1px solid var(--line);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.page-home .hero__back:hover{color:var(--amber-500);border-color:rgba(244,183,64,.6);}

@media (min-width:900px){
  .page-home .hero__inner{
    grid-template-columns:minmax(190px,232px) minmax(0,1fr);
    align-items:stretch;
  }
  .page-home .rail-wrap{padding-top:6px;}
}

/* ---------- 通用区块 ---------- */
.page-home .sec{
  padding:clamp(34px,5vw,64px) 0;
  border-top:1px solid var(--line-soft);
}
.page-home .sec__head{max-width:70ch;}
.page-home .sec__head .eyebrow{margin:0 0 10px;color:var(--cyan-200);}
.page-home .sec__lead{
  margin:0;font-size:clamp(14px,1.5vw,16px);line-height:1.8;color:var(--slate-300);
}
.page-home .sec__foot{margin:22px 0 0;font-size:14px;}

/* ---------- 时间轴 ---------- */
.page-home .track{display:block;width:100%;height:auto;margin-top:clamp(16px,3vw,28px);}
.page-home .track text{
  font-family:var(--font-mono);font-size:17px;fill:var(--slate-300);
}
.page-home .track .tk-code{fill:var(--cyan-200);font-weight:600;font-size:19px;}
.page-home .track .tk-code--last{fill:var(--amber-500);}
.page-home .track .tk-num{font-size:14px;fill:rgba(185,201,218,.62);}
.page-home .track .tk-num--last{fill:var(--amber-300);}

.page-home .steps{display:grid;gap:14px;margin-top:clamp(18px,3vw,28px);}
.page-home .step{
  position:relative;
  padding:18px 16px 20px;
  background:var(--ink-800);
  border:1px solid var(--line-soft);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.page-home .step:hover{border-color:var(--line-strong);background:var(--ink-700);}
.page-home .step--last{border-color:rgba(244,183,64,.32);}
.page-home .step__num{
  display:block;font-size:11px;letter-spacing:.12em;color:var(--cyan-400);
}
.page-home .step--last .step__num{color:var(--amber-500);}
.page-home .step h3{
  margin:8px 0 6px;font-size:15px;font-weight:700;color:var(--paper-100);line-height:1.5;
}
.page-home .step p{margin:0;font-size:13.5px;line-height:1.72;color:var(--slate-300);}

/* ---------- 更新记录 ---------- */
.page-home .upd{display:grid;gap:clamp(22px,3.5vw,40px);}
.page-home .upd__text p{
  margin:0 0 12px;font-size:15px;line-height:1.8;color:var(--slate-300);max-width:58ch;
}
.page-home .pathbars{
  padding:18px;
  background:var(--ink-800);
  border:1px solid var(--line-soft);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
}
.page-home .bar-row{margin-bottom:16px;}
.page-home .bar-row:last-child{margin-bottom:0;}
.page-home .bar-label{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;
  font-size:12px;letter-spacing:.04em;color:var(--slate-300);margin-bottom:7px;
}
.page-home .bar{
  display:block;height:10px;background:rgba(185,201,218,.1);
  overflow:hidden;
}
.page-home .bar span{display:block;height:100%;}
.page-home .bar--old span{width:100%;background:linear-gradient(90deg,rgba(185,201,218,.55),rgba(185,201,218,.18));}
.page-home .bar--new span{width:52%;background:linear-gradient(90deg,var(--cyan-400),var(--amber-500));}
.page-home .upd__figure{margin:16px 0 0;}
.page-home .upd__figure img{
  display:block;width:100%;height:auto;max-width:100%;
  object-fit:cover;
  border:1px solid var(--line-soft);
  background:var(--ink-700);
}
.page-home .upd__figure figcaption{
  margin-top:10px;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;
  color:var(--slate-300);
}
@media (min-width:920px){
  .page-home .upd{grid-template-columns:1.05fr .95fr;align-items:start;}
}

/* ---------- 案例 ---------- */
.page-home .cases{
  position:relative;
  display:grid;gap:16px;
  margin-top:clamp(18px,3vw,30px);
  padding:2px;
}
.page-home .cases__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.13;pointer-events:none;max-width:100%;
}
.page-home .case{
  position:relative;z-index:1;
  padding:22px 18px 24px;
  background:linear-gradient(160deg,rgba(19,38,61,.96),rgba(11,27,46,.96));
  border:1px solid var(--line-soft);
  clip-path:polygon(0 16px,16px 0,100% 0,100% 100%,0 100%);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.page-home .case:hover{border-color:var(--line-strong);transform:translateY(-2px);}
.page-home .case__no{
  display:block;font-size:clamp(1.5rem,3vw,2rem);font-weight:700;line-height:1;
  color:var(--amber-500);letter-spacing:.04em;
}
.page-home .case__tag{
  display:inline-block;margin-top:10px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  padding:4px 9px;color:var(--cyan-200);
  background:rgba(43,227,210,.1);
  border-left:2px solid var(--cyan-400);
}
.page-home .case:nth-child(4n+4) .case__tag{
  color:var(--amber-300);background:rgba(244,183,64,.12);border-left-color:var(--amber-500);
}
.page-home .case h3{margin:12px 0 8px;font-size:15.5px;line-height:1.55;font-weight:700;color:var(--paper-100);}
.page-home .case p{margin:0;font-size:13.5px;line-height:1.72;color:var(--slate-300);}
@media (min-width:680px){
  .page-home .cases{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:1040px){
  .page-home .cases{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
}

/* ---------- 对照表 ---------- */
.page-home .cmp-wrap{
  margin-top:clamp(18px,3vw,28px);
  overflow-x:auto;
  border:1px solid var(--line);
  background:var(--ink-900);
  -webkit-overflow-scrolling:touch;
}
.page-home .cmp{
  width:100%;min-width:600px;border-collapse:collapse;
  font-size:13.5px;line-height:1.7;
}
.page-home .cmp th,
.page-home .cmp td{
  padding:13px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-soft);
}
.page-home .cmp thead th{
  background:var(--ink-800);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;font-weight:600;
  color:var(--cyan-200);white-space:nowrap;
}
.page-home .cmp thead th:nth-child(3){color:var(--amber-300);}
.page-home .cmp tbody th{
  position:sticky;left:0;z-index:1;
  background:var(--ink-900);
  font-weight:600;color:var(--paper-100);white-space:nowrap;
}
.page-home .cmp tbody td{color:var(--slate-300);}
.page-home .cmp tbody td:nth-child(3){
  color:var(--paper-100);
  background:rgba(244,183,64,.06);
}
.page-home .cmp tbody tr:last-child th,
.page-home .cmp tbody tr:last-child td{border-bottom:0;}
.page-home .cmp tbody tr:hover th,
.page-home .cmp tbody tr:hover td{background:rgba(43,227,210,.1);}
.page-home .cmp tbody tr:hover td:nth-child(3){background:rgba(244,183,64,.16);}

/* ---------- 帮助与联系 ---------- */
.page-home .help-grid{display:grid;gap:18px;margin-top:clamp(18px,3vw,28px);}
.page-home .hcard{
  padding:22px 20px 24px;
  background:var(--ink-800);
  border:1px solid var(--line);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);
}
.page-home .hcard h3{margin:0 0 14px;font-size:16px;font-weight:700;color:var(--paper-100);}
.page-home .hcard--contact{border-color:rgba(216,76,240,.32);}
.page-home .hlist{list-style:none;margin:0;padding:0;}
.page-home .hlist li{
  padding:10px 0 10px 26px;position:relative;
  border-bottom:1px dashed var(--line-soft);
}
.page-home .hlist li:last-child{border-bottom:0;}
.page-home .hlist li::before{
  content:"›";position:absolute;left:6px;top:9px;
  font-family:var(--font-mono);color:var(--cyan-400);font-size:14px;
}
.page-home .hlist a{
  color:var(--paper-100);text-decoration:none;font-size:14px;
  transition:color var(--dur) var(--ease);
}
.page-home .hlist a:hover{color:var(--amber-500);}
.page-home .kvs{margin:0;}
.page-home .kv{
  display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:space-between;
  padding:11px 0;border-bottom:1px dashed var(--line-soft);
}
.page-home .kv:last-child{border-bottom:0;}
.page-home .kv dt{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;
  color:var(--slate-300);
}
.page-home .kv dd{
  margin:0;font-size:14px;color:var(--paper-100);
  word-break:break-word;
}
.page-home .kv dd a{color:var(--cyan-200);text-decoration:none;}
.page-home .kv dd a:hover{color:var(--amber-500);}
.page-home .hcard__note{
  margin:14px 0 0;font-size:12.5px;line-height:1.7;color:var(--slate-300);
}
.page-home .hcard__links{display:flex;flex-wrap:wrap;gap:14px;margin:14px 0 0;font-size:13px;}
@media (min-width:880px){
  .page-home .help-grid{grid-template-columns:1fr 1fr;align-items:start;}
}

@media (prefers-reduced-motion:reduce){
  .page-home *{transition:none !important;animation:none !important;}
}
<<<END>>>