.page-home{
  --home-soft: rgba(242,236,225,.76);
  --home-line: rgba(216,208,193,.24);
  --home-line-soft: rgba(216,208,193,.14);
  --home-gap: clamp(28px,4vw,56px);
  padding-top: calc(var(--header-h) + clamp(16px,3vw,40px));
  padding-bottom: clamp(56px,8vw,104px);
  background: var(--ink-900);
  color: var(--paper-100);
  font-family: var(--font-body);
}

.page-home [id]{ scroll-margin-top: calc(var(--header-h) + 28px); }

/* ---------- 页面上下文 ---------- */
.page-home .page-context{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(22px,3vw,40px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--gray-500);
}
.page-home .page-context__brand{ color: var(--cyan-400); }
.page-home .page-context__sep{ color: var(--home-line); }
.page-home .page-context__current{ color: var(--home-soft); }
.page-home .page-context__stamp{
  padding: 3px 10px;
  border: 1px solid var(--signal-500);
  border-radius: 2px;
  color: var(--signal-300);
  font-weight: 600;
}
@media (min-width: 720px){
  .page-home .page-context__stamp{ margin-left: auto; }
}

/* ---------- 分屏骨架 ---------- */
.page-home .split-layout{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px,5vw,56px);
}
.page-home .split-layout__main{ min-width: 0; }
.page-home .split-layout__rail{ min-width: 0; }
@media (min-width: 1180px){
  .page-home .split-layout{
    grid-template-columns: minmax(0,1.62fr) minmax(0,1fr);
    align-items: start;
  }
}

/* ---------- 右侧本月索引条 ---------- */
.page-home .index-rail{
  position: relative;
  padding: 18px 18px 16px;
  border: 1px solid var(--home-line-soft);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, var(--ink-700) 0%, rgba(16,38,58,.62) 58%, rgba(8,19,31,0) 100%);
}
.page-home .index-rail::before{
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  width: 2px;
  height: 62%;
  background: linear-gradient(180deg, var(--cyan-400), rgba(47,217,198,0));
  pointer-events: none;
}
@media (min-width: 1180px){
  .page-home .index-rail{
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
}
.page-home .index-rail__head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--home-line);
}
.page-home .index-rail__title{
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--paper-100);
}
.page-home .index-rail__count{
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--signal-300);
}
.page-home .index-rail__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.page-home .index-rail__link{
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 10px;
  border-left: 2px solid transparent;
  border-radius: 0 2px 2px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.page-home .index-rail__link:hover{
  color: var(--paper-100);
  background: rgba(242,236,225,.05);
}
.page-home .index-rail__link:focus-visible{
  outline: 2px solid var(--cyan-400);
  outline-offset: 3px;
}
.page-home .index-rail__link[aria-current="true"]{
  color: var(--paper-100);
  border-left-color: var(--signal-500);
  background: rgba(255,107,44,.10);
}
.page-home .index-rail__no{
  flex: 0 0 auto;
  min-width: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--cyan-400);
}
.page-home .index-rail__link[aria-current="true"] .index-rail__no{ color: var(--signal-300); }

@media (max-width: 1179px){
  .page-home .split-layout__rail{ order: -1; }
  .page-home .index-rail{ padding: 14px 16px 12px; }
  .page-home .index-rail__list{
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .page-home .index-rail__list > li{ flex: 0 0 auto; }
  .page-home .index-rail__link{
    border-left: 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    padding: 7px 10px;
  }
  .page-home .index-rail__link[aria-current="true"]{
    border-left: 0;
    border-bottom-color: var(--signal-500);
  }
}

/* ---------- 标题与导语 ---------- */
.page-home .page-title{
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 6vw, 62px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--paper-100);
  text-wrap: balance;
}
.page-home .page-title__no{
  display: block;
  width: fit-content;
  margin-bottom: 14px;
  padding: 3px 9px;
  border: 1px solid var(--signal-500);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: clamp(12px,1.3vw,14px);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--signal-300);
}
.page-home .lead__intro{
  max-width: 34em;
  margin: 0 0 clamp(26px,3.4vw,40px);
  font-size: clamp(16px,1.6vw,18px);
  line-height: 1.85;
  color: var(--home-soft);
}

/* ---------- 本月目录 ---------- */
.page-home .month-catalog{ margin-bottom: clamp(26px,3.4vw,40px); }
.page-home .month-catalog__head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.page-home .month-catalog__head .sub-title{
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--paper-100);
}
.page-home .catalog-list{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--home-line-soft);
}
.page-home .catalog-item{
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 8px;
  border-bottom: 1px solid var(--home-line-soft);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.page-home .catalog-item--current{
  background: linear-gradient(90deg, rgba(255,107,44,.16), rgba(255,107,44,0));
  color: var(--paper-100);
}
.page-home .catalog-item__no{
  flex: 0 0 auto;
  min-width: 4.4em;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--cyan-400);
}
.page-home .catalog-item--current .catalog-item__no{ color: var(--signal-300); }
.page-home .catalog-item__title{
  flex: 1 1 auto;
  min-width: 0;
}
.page-home .catalog-item .tag{ flex: 0 0 auto; }
.page-home .catalog-foot{ margin: 14px 0 0; }

/* ---------- 第 12 条记录卡 ---------- */
.page-home .record-head{
  position: relative;
  padding: clamp(20px,2.6vw,30px);
  border: 1px solid var(--home-line-soft);
  border-left: 3px solid var(--signal-500);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(16,38,58,.95), rgba(8,19,31,.75));
}
.page-home .record-head__top{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.page-home .record-head__title{
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(19px,2.3vw,25px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--paper-100);
}
.page-home .record-head__text{
  max-width: 34em;
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--home-soft);
}
.page-home .record-head__meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px dashed var(--home-line);
}
.page-home .record-head__id{
  font-size: 13px;
  color: var(--gray-500);
}
.page-home .record-head__id code{
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--cyan-400);
}
.page-home .copy-btn{
  padding: 7px 14px;
  border: 1px solid var(--home-line);
  border-radius: 2px;
  background: transparent;
  color: var(--paper-100);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.page-home .copy-btn:hover{
  border-color: var(--signal-500);
  color: var(--signal-300);
}
.page-home .copy-btn.is-copied{
  border-color: var(--cyan-400);
  color: var(--cyan-200);
  background: rgba(47,217,198,.12);
}
.page-home .copy-btn:focus-visible{
  outline: 2px solid var(--cyan-400);
  outline-offset: 3px;
}

/* ---------- 首屏图 ---------- */
.page-home .lead__figure{ margin: clamp(28px,3.6vw,44px) 0 0; }

/* ---------- 通用图注与章节 ---------- */
.page-home .figure{ margin: 0; }
.page-home .figure__media{
  overflow: hidden;
  border: 1px solid var(--home-line-soft);
  border-radius: var(--radius);
  background: var(--ink-700);
}
.page-home .figure__media img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}
.page-home .figure__caption{
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--gray-500);
}

.page-home .block{ margin-block: clamp(52px,7vw,104px); }
.page-home .section-head{
  max-width: 44em;
  margin-bottom: clamp(20px,2.8vw,32px);
}
.page-home .section-title{
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(23px,3vw,34px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--paper-100);
}
.page-home .section-title::after{
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin-top: 12px;
  background: var(--cyan-400);
}
.page-home .section-lead{
  max-width: 36em;
  margin: 0;
  font-size: 16px;
  line-height: 1.85;
  color: var(--home-soft);
}
@media (max-width: 900px){
  .page-home .measure-72,
  .page-home .measure-86,
  .page-home .measure-100{ max-width: 100%; }
}

/* ---------- 两类路径 ---------- */
.page-home .paths-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px,3.6vw,40px);
}
@media (min-width: 900px){
  .page-home .paths-grid{
    grid-template-columns: minmax(0,1.62fr) minmax(0,1fr);
    align-items: start;
  }
}
.page-home .tabs{ position: relative; }
.page-home .tablist{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--home-line);
  padding-bottom: 0;
}
.page-home .tab{
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  border-radius: 2px 2px 0 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.page-home .tab:hover{ color: var(--paper-100); background: rgba(242,236,225,.06); }
.page-home .tab[aria-selected="true"]{
  color: var(--ink-900);
  background: var(--paper-100);
  border-bottom-color: var(--signal-500);
  font-weight: 700;
}
.page-home .tab:focus-visible{
  outline: 2px solid var(--cyan-400);
  outline-offset: 3px;
}
.page-home .tabpanel{
  padding: clamp(20px,2.6vw,30px);
  border: 1px solid var(--paper-300);
  border-radius: var(--radius);
  background: var(--paper-100);
  color: var(--text-900);
  box-shadow: 7px 7px 0 0 rgba(216,208,193,.30);
  animation: home-tab-in 200ms var(--ease) both;
}
.page-home .tabpanel[hidden]{ display: none; }
@keyframes home-tab-in{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}
.page-home .path-facts{
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.page-home .path-fact{
  display: grid;
  grid-template-columns: 5.6em minmax(0,1fr);
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(14,28,40,.18);
  font-size: 15px;
  line-height: 1.78;
}
.page-home .path-fact:last-child{ border-bottom: 0; padding-bottom: 0; }
.page-home .path-fact__key{
  padding-top: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gray-500);
}
.page-home .path-fact__value{ color: var(--text-900); }
.page-home .tabpanel .note{
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--gray-500);
}
@media (max-width: 520px){
  .page-home .path-fact{ grid-template-columns: 1fr; gap: 4px; }
}
.page-home .paths-figure .figure__media{ background: var(--ink-700); }

/* ---------- 编号步骤卡 ---------- */
.page-home .steps-figure{ margin-bottom: clamp(24px,3vw,36px); }
.page-home .step-list{
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.page-home .step-list > li{
  position: relative;
  margin-bottom: 16px;
  padding: clamp(18px,2.4vw,26px);
  border: 1px solid var(--home-line-soft);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(16,38,58,.92), rgba(8,19,31,.92));
}
.page-home .step-list > li::after{
  content: "";
  position: absolute;
  left: 30px;
  bottom: -17px;
  width: 1px;
  height: 16px;
  background: var(--home-line);
}
.page-home .step-list > li:last-child::after{ display: none; }
.page-home .step__no{
  display: inline-block;
  margin-bottom: 12px;
  padding: 2px 9px;
  border-radius: 2px;
  background: var(--signal-500);
  color: var(--ink-900);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
}
.page-home .step__title{
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(17px,2vw,20px);
  font-weight: 700;
  line-height: 1.45;
  color: var(--paper-100);
}
.page-home .step__text{
  max-width: 34em;
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--home-soft);
}
.page-home .step__check{
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid rgba(47,217,198,.55);
  font-size: 13px;
  line-height: 1.75;
  color: var(--cyan-200);
}

/* ---------- 旧版本资料清单 ---------- */
.page-home .archive-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px,3.6vw,40px);
}
@media (min-width: 940px){
  .page-home .archive-grid{
    grid-template-columns: minmax(0,1.55fr) minmax(0,1fr);
    align-items: start;
  }
}
.page-home .archive-list{ min-width: 0; }
.page-home .fold{
  margin-bottom: 12px;
  border: 1px solid var(--paper-300);
  border-radius: var(--radius);
  background: var(--paper-100);
  overflow: hidden;
}
.page-home .fold__summary{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  padding: 15px 18px;
  list-style: none;
  cursor: pointer;
  background: rgba(216,208,193,.32);
  color: var(--text-900);
  transition: background-color var(--dur) var(--ease);
}
.page-home .fold__summary::-webkit-details-marker{ display: none; }
.page-home .fold__summary:hover{ background: rgba(216,208,193,.52); }
.page-home .fold__summary:focus-visible{
  outline: 2px solid var(--cyan-400);
  outline-offset: -2px;
}
.page-home .fold[open] > .fold__summary{
  border-bottom: 1px solid var(--paper-300);
}
.page-home .fold__summary::after{
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--signal-500);
}
.page-home .fold[open] > .fold__summary::after{ content: "−"; }
.page-home .archive-ver{
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--signal-500);
}
.page-home .archive-name{
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-900);
}
.page-home .archive-state{
  flex: 0 0 auto;
  padding: 2px 8px;
  border: 1px solid rgba(14,28,40,.22);
  border-radius: 2px;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--gray-500);
}
.page-home .fold__body{
  padding: 16px 18px 18px;
  background: var(--paper-100);
}
.page-home .archive-facts{ margin: 0; }
.page-home .archive-fact{
  display: grid;
  grid-template-columns: 5.2em minmax(0,1fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(14,28,40,.16);
  font-size: 14px;
  line-height: 1.78;
}
.page-home .archive-fact:last-child{ border-bottom: 0; padding-bottom: 0; }
.page-home .archive-fact:first-child{ padding-top: 0; }
.page-home .archive-fact dt{
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gray-500);
}
.page-home .archive-fact dd{ margin: 0; color: var(--text-900); }
@media (max-width: 520px){
  .page-home .archive-fact{ grid-template-columns: 1fr; gap: 3px; }
}
.page-home .archive-more{ margin: 18px 0 0; }

/* ---------- 调整区间与服务范围 ---------- */
.page-home .scope-table-wrap{
  overflow-x: auto;
  border: 1px solid var(--home-line-soft);
  border-radius: var(--radius);
}
.page-home .scope-table{
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.7;
}
.page-home .scope-table th,
.page-home .scope-table td{
  padding: 13px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--home-line-soft);
}
.page-home .scope-table tr:last-child th,
.page-home .scope-table tr:last-child td{ border-bottom: 0; }
.page-home .scope-table th{
  width: 34%;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--cyan-400);
  white-space: nowrap;
}
.page-home .scope-table td{ color: var(--paper-100); }
.page-home .scope-table tbody tr:nth-child(even){ background: rgba(16,38,58,.7); }
.page-home .scope-foot{
  max-width: 40em;
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--gray-500);
}
.page-home .scope-foot a{
  color: var(--cyan-400);
  text-decoration: none;
  border-bottom: 1px solid rgba(47,217,198,.4);
}
.page-home .scope-foot a:hover{ color: var(--cyan-200); }

/* ---------- 接下来去哪儿 ---------- */
.page-home .next-list{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--home-line);
}
.page-home .next-item{
  display: grid;
  grid-template-columns: 2.6em minmax(0,1fr);
  gap: 6px 16px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--home-line-soft);
}
.page-home .next-item__no{
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--signal-300);
}
.page-home .next-item__body{ min-width: 0; }
.page-home .next-item__title{
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(16px,1.9vw,19px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--paper-100);
}
.page-home .next-item__text{
  max-width: 34em;
  margin: 0;
  font-size: 15px;
  line-height: 1.82;
  color: var(--home-soft);
}
.page-home .next-item__link{
  grid-column: 2;
  display: inline-block;
  width: fit-content;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--cyan-400);
  text-decoration: none;
  border-bottom: 1px solid rgba(47,217,198,.45);
  padding-bottom: 2px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.page-home .next-item__link:hover{ color: var(--cyan-200); border-bottom-color: var(--cyan-200); }
.page-home .next-item__link:focus-visible{
  outline: 2px solid var(--cyan-400);
  outline-offset: 3px;
}
@media (min-width: 760px){
  .page-home .next-item{
    grid-template-columns: 2.6em minmax(0,1fr) auto;
    align-items: start;
  }
  .page-home .next-item__link{
    grid-column: 3;
    margin-top: 2px;
    white-space: nowrap;
  }
}

/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion: reduce){
  .page-home .tabpanel{ animation: none; }
  .page-home .index-rail__link,
  .page-home .copy-btn,
  .page-home .tab,
  .page-home .fold__summary,
  .page-home .next-item__link{ transition: none; }
}
<<<END>>>

<main id="main-content" class="page-home">
  <div class="shell">

    <nav class="page-context" aria-label="当前位置">
      <span class="page-context__brand">U米中文站</span>
      <span class="page-context__sep" aria-hidden="true">/</span>
      <span class="page-context__current">本月记录</span>
      <span class="page-context__stamp">第 12 条 · 已发布</span>
    </nav>

    <div class="split-layout">
      <div class="split-layout__main">

        <section id="record-12" data-anchor-entry data-entry-text="第12条记录 换设备 记录接回来 版本号 V5.4">
          <h1 class="page-title">
            <span class="page-title__no">No.12</span>
            换设备后，把记录接回来
          </h1>
          <p class="lead__intro">U米官网本月第 12 条已经发布，说的是换设备之后怎样让记录回到新机器上。先完成身份校验，再给新设备起个名字，最后等记录同步到位。三个动作按顺序走完，多数情况下十分钟内就能接着用。</p>

          <div class="month-catalog">
            <div class="month-catalog__head">
              <h2 class="sub-title">本月目录</h2>
              <span class="note">共 12 条，按发布时间倒序</span>
            </div>
            <ol class="catalog-list">
              <li class="catalog-item catalog-item--current">
                <span class="catalog-item__no">第 12 条</span>
                <span class="catalog-item__title">账号侧设备迁移路径的三个动作</span>
                <span class="tag tag--signal">设备迁移</span>
              </li>
              <li class="catalog-item">
                <span class="catalog-item__no">第 11 条</span>
                <span class="catalog-item__title">离线写入的记录在联网后补齐索引</span>
                <span class="tag tag--paper">同步</span>
              </li>
              <li class="catalog-item">
                <span class="catalog-item__no">第 10 条</span>
                <span class="catalog-item__title">macOS 端安装包与系统版本对照</span>
                <span class="tag tag--paper">兼容性</span>
              </li>
              <li class="catalog-item">
                <span class="catalog-item__no">第 09 条</span>
                <span class="catalog-item__title">回退旧版本之前需要留出的本地空间</span>
                <span class="tag tag--paper">回退</span>
              </li>
            </ol>
            <p class="catalog-foot">
              <a class="btn btn--quiet btn--sm" href="/topics/">看本月全部 12 条</a>
            </p>
          </div>

          <article class="record-head">
            <div class="record-head__top">
              <span class="entry-no">第 12 条</span>
              <span class="tag tag--signal">设备迁移</span>
            </div>
            <h2 class="record-head__title">账号侧设备迁移：身份校验、设备命名、记录同步</h2>
            <p class="record-head__text">这一条只解决一件事——把旧设备上的记录带到新设备。走账号侧，不需要手动抄编号；旧设备上的内容保持原样，不会被清掉。对应正式版版本为 V5.4。</p>
            <div class="record-head__meta">
              <span class="record-head__id">记录编号 <code>UM-05-012</code></span>
              <button class="copy-btn" type="button" data-copy="UM-05-012">复制编号</button>
            </div>
          </article>

          <figure class="figure figure--wide lead__figure">
            <div class="figure__media">
              <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="俯拍的书桌，摊开的记录本上贴着橙色编号标签，旁边露出设备屏幕的界面局部" decoding="async">
            </div>
            <figcaption class="figure__caption">本月的记录本：第 12 条压在最上面，旁边那台设备正在同步。</figcaption>
          </figure>
        </section>

        <section id="paths" class="block" data-anchor-entry data-entry-text="两类重新登录路径 账号侧设备迁移 本地记录手动对照">
          <div class="section-head">
            <h2 class="section-title">换设备后，先选一条路径</h2>
            <p class="section-lead">旧设备还能登进同一个账号，就走账号侧迁移；旧设备已经不在手边，就拿着编号逐条对照着补。</p>
          </div>

          <div class="paths-grid">
            <div class="tabs" data-tabs>
              <div class="tablist" role="tablist" aria-label="重新登录路径">
                <button class="tab" type="button" role="tab" id="tab-migrate" aria-controls="panel-migrate" aria-selected="true" data-active="true">账号侧设备迁移</button>
                <button class="tab" type="button" role="tab" id="tab-manual" aria-controls="panel-manual" aria-selected="false" tabindex="-1">本地记录手动对照</button>
              </div>

              <div class="tabpanel" role="tabpanel" id="panel-migrate" aria-labelledby="tab-migrate" data-active="true">
                <ul class="path-facts">
                  <li class="path-fact">
                    <span class="path-fact__key">适用场景</span>
                    <span class="path-fact__value">旧设备还能正常打开，也愿意让记录跟着账号走。</span>
                  </li>
                  <li class="path-fact">
                    <span class="path-fact__key">前置条件</span>
                    <span class="path-fact__value">原账号与密码可用；新设备已装好正式版；两台设备都能连上网。</span>
                  </li>
                  <li class="path-fact">
                    <span class="path-fact__key">预计耗时</span>
                    <span class="path-fact__value">多数情况下十分钟以内，记录条数多的账号会稍长一些。</span>
                  </li>
                </ul>
                <p class="note">走完这一步，新设备上的记录会跟着账号继续往下走，旧设备里的内容保持原样。</p>
              </div>

              <div class="tabpanel" role="tabpanel" id="panel-manual" aria-labelledby="tab-manual" hidden>
                <ul class="path-facts">
                  <li class="path-fact">
                    <span class="path-fact__key">适用场景</span>
                    <span class="path-fact__value">旧设备已经不在手边，或者不方便再登录一次。</span>
                  </li>
                  <li class="path-fact">
                    <span class="path-fact__key">前置条件</span>
                    <span class="path-fact__value">手上有旧设备的记录编号；新设备已装好正式版并完成登录。</span>
                  </li>
                  <li class="path-fact">
                    <span class="path-fact__key">预计耗时</span>
                    <span class="path-fact__value">按要对照的条目数算，一般每一条一到两分钟。</span>
                  </li>
                </ul>
                <p class="note">这条路径靠版本号与记录编号说话，不用两台设备同时在线，适合隔了一段时间才处理的情况。</p>
              </div>
            </div>

            <figure class="figure paths-figure">
              <div class="figure__media">
                <img src="{zhanqunpic:h:600w:800}" width="800" height="600" loading="lazy" decoding="async" alt="一排交错叠放的纸质索引标签，标签上印有等宽编号，橙与青两色交替">
              </div>
              <figcaption class="figure__caption">橙色标签对应账号侧迁移，青色标签对应本地手动对照。</figcaption>
            </figure>
          </div>
        </section>

        <section id="steps" class="block measure-72" data-anchor-entry data-entry-text="迁移三个动作 身份校验 设备命名 记录同步">
          <div class="section-head">
            <h2 class="section-title">照着手册走完三个动作</h2>
            <p class="section-lead">第 12 条把迁移拆成三步，每一步都留了一个当场就能确认的参照点。</p>
          </div>

          <figure class="figure figure--wide steps-figure">
            <div class="figure__media">
              <img src="{zhanqunpic:h:675w:1200}" width="1200" height="675" loading="lazy" decoding="async" alt="两台设备的界面局部并列，中间用橙色箭头与虚线连接，示意记录在两台设备间迁移">
            </div>
            <figcaption class="figure__caption">两台设备并排放着，中间那条橙线就是记录要走的路线。</figcaption>
          </figure>

          <ol class="step-list">
            <li>
              <span class="step__no">01</span>
              <h3 class="step__title">第一步：在新设备上完成身份校验</h3>
              <p class="step__text">打开正式版，用原来的账号登录。登录成功后看一眼账号信息，确认和旧设备上显示的是同一个。</p>
              <p class="step__check">记下这一点：登录后的账号名称与旧设备一致。</p>
            </li>
            <li>
              <span class="step__no">02</span>
              <h3 class="step__title">第二步：给新设备起一个能认出来的名字</h3>
              <p class="step__text">在设备列表里命名，按使用人或者按房间来区分都行。下次再换设备时，一眼就能认出哪台是哪台。</p>
              <p class="step__check">记下这一点：设备列表里出现了这台新设备的名字。</p>
            </li>
            <li>
              <span class="step__no">03</span>
              <h3 class="step__title">第三步：等记录同步到新设备</h3>
              <p class="step__text">保持联网，记录会按条目顺序补齐。中途断网也不影响，下次联网时会自动接上。</p>
              <p class="step__check">记下这一点：新设备上的条目数量与旧设备对得上。</p>
            </li>
          </ol>
        </section>

        <section id="archive" class="block measure-86" data-anchor-entry data-entry-text="旧版本资料清单 版本号倒序 变更摘要 影响范围 回退方式">
          <div class="section-head">
            <h2 class="section-title">旧版本资料，按版本号倒着排</h2>
            <p class="section-lead">近三年 32 个历史版本的说明都收在这里。点开同一个版本号，就能看到它的变更摘要、影响范围与回退方式。</p>
          </div>

          <div class="archive-grid">
            <div class="archive-list">
              <details class="fold" open>
                <summary class="fold__summary">
                  <span class="archive-ver">V5.4</span>
                  <span class="archive-name">离线记录与索引补齐</span>
                  <span class="archive-state">主线在售</span>
                </summary>
                <div class="fold__body">
                  <dl class="archive-facts">
                    <div class="archive-fact">
                      <dt>变更摘要</dt>
                      <dd>离线状态下写入的记录，联网后自动补齐索引，不用手动触发。</dd>
                    </div>
                    <div class="archive-fact">
                      <dt>影响范围</dt>
                      <dd>Windows、macOS、Android、iOS 四端同步生效。</dd>
                    </div>
                    <div class="archive-fact">
                      <dt>回退方式</dt>
                      <dd>退回上一版本后，离线期间写入的记录仍保留在本地。</dd>
                    </div>
                  </dl>
                </div>
              </details>

              <details class="fold" open>
                <summary class="fold__summary">
                  <span class="archive-ver">V5.3</span>
                  <span class="archive-name">设备列表与命名规则调整</span>
                  <span class="archive-state">主线在售</span>
                </summary>
                <div class="fold__body">
                  <dl class="archive-facts">
                    <div class="archive-fact">
                      <dt>变更摘要</dt>
                      <dd>设备列表支持自定义命名，迁移时按名称辨认设备。</dd>
                    </div>
                    <div class="archive-fact">
                      <dt>影响范围</dt>
                      <dd>已绑定多台设备的账号，在首次打开时会看到新的列表样式。</dd>
                    </div>
                    <div class="archive-fact">
                      <dt>回退方式</dt>
                      <dd>回退后设备名称保留，列表回到原有排列顺序。</dd>
                    </div>
                  </dl>
                </div>
              </details>

              <details class="fold">
                <summary class="fold__summary">
                  <span class="archive-ver">V5.2</span>
                  <span class="archive-name">安装包体量与四端分发</span>
                  <span class="archive-state">历史版本</span>
                </summary>
                <div class="fold__body">
                  <dl class="archive-facts">
                    <div class="archive-fact">
                      <dt>变更摘要</dt>
                      <dd>安装包体量收敛到约 86 MB，四类平台分别提供对应安装包。</dd>
                    </div>
                    <div class="archive-fact">
                      <dt>影响范围</dt>
                      <dd>全部四端；旧安装包在回退时仍可使用。</dd>
                    </div>
                    <div class="archive-fact">
                      <dt>回退方式</dt>
                      <dd>安装旧版本前先导出记录编号，便于回退后逐条对上。</dd>
                    </div>
                  </dl>
                </div>
              </details>

              <details class="fold">
                <summary class="fold__summary">
                  <span class="archive-ver">V5.1</span>
                  <span class="archive-name">迁移路径拆分为两类</span>
                  <span class="archive-state">历史版本</span>
                </summary>
                <div class="fold__body">
                  <dl class="archive-facts">
                    <div class="archive-fact">
                      <dt>变更摘要</dt>
                      <dd>换设备后的处理方式拆成账号侧迁移与本地记录手动对照两条。</dd>
                    </div>
                    <div class="archive-fact">
                      <dt>影响范围</dt>
                      <dd>只影响重新登录流程，日常使用不受影响。</dd>
                    </div>
                    <div class="archive-fact">
                      <dt>回退方式</dt>
                      <dd>回退后仍可按账号登录，记录与本机内容不受改动。</dd>
                    </div>
                  </dl>
                </div>
              </details>

              <p class="archive-more">
                <a class="btn btn--ghost btn--sm" href="/experience/">去体验中心看完整清单</a>
              </p>
            </div>

            <figure class="figure archive-figure">
              <div class="figure__media">
                <img src="{zhanqunpic:h:750w:1000}" width="1000" height="750" loading="lazy" decoding="async" alt="多张印有版本号的卡片按序叠放，最上面一张被翻开一角，露出变更摘要行">
              </div>
              <figcaption class="figure__caption">版本卡按编号叠放，翻开哪一张就看哪一版的说明。</figcaption>
            </figure>
          </div>
        </section>

        <section id="scope" class="block" data-anchor-entry data-entry-text="本月调整区间 服务范围 覆盖平台 响应时间">
          <div class="section-head">
            <h2 class="section-title">本月调整了什么，服务到哪儿</h2>
            <p class="section-lead">这一组数字对应本月的实际动作，和下个月的对比着看，就知道节奏有没有变。</p>
          </div>

          <div class="scope-table-wrap">
            <table class="scope-table">
              <caption class="visually-hidden">本月调整区间与服务范围</caption>
              <tbody>
                <tr>
                  <th scope="row">本月条目区间</th>
                  <td>第 1 条 — 第 12 条</td>
                </tr>
                <tr>
                  <th scope="row">涉及平台</th>
                  <td>Windows、macOS、Android、iOS 四端</td>
                </tr>
                <tr>
                  <th scope="row">上手引导</th>
                  <td>安装、登录、设备绑定、记录同步 四个动作</td>
                </tr>
                <tr>
                  <th scope="row">服务范围</th>
                  <td>覆盖 31 个省级行政区</td>
                </tr>
                <tr>
                  <th scope="row">服务企业与团队</th>
                  <td>累计 2600 余家</td>
                </tr>
                <tr>
                  <th scope="row">首次响应</th>
                  <td>工作日内平均约 4 小时</td>
                </tr>
              </tbody>
            </table>
          </div>

          <p class="scope-foot">服务范围与调整区间每月随索引条更新一次。想先看看是谁在维护这些内容，可以读<a href="/introduction/">站点介绍</a>；遇到具体问题，<a href="/find-us/">找到我们</a>里有邮箱和电话。</p>
        </section>

        <section id="next" class="block measure-86" data-anchor-entry data-entry-text="继续核验 专题记录 使用指南 体验中心">
          <div class="section-head">
            <h2 class="section-title">接下来去哪儿</h2>
            <p class="section-lead">三处入口各管一件事，按你眼下卡在哪一步来选。</p>
          </div>

          <ul class="next-list">
            <li class="next-item">
              <span class="next-item__no">01</span>
              <div class="next-item__body">
                <h3 class="next-item__title">想看本月每一条改了什么</h3>
                <p class="next-item__text">专题记录按七个栏目排开，本月 12 条各带一份简短说明，点进任意一条就能看到它影响哪几端。</p>
              </div>
              <a class="next-item__link" href="/topics/">去专题记录</a>
            </li>
            <li class="next-item">
              <span class="next-item__no">02</span>
              <div class="next-item__body">
                <h3 class="next-item__title">已经卡在登录或者同步这一步</h3>
                <p class="next-item__text">使用指南把 68 个问题条目分成安装、登录、迁移、同步、回退五组，照着标题找，基本一眼就能落到对应那条。</p>
              </div>
              <a class="next-item__link" href="/guide/">去使用指南</a>
            </li>
            <li class="next-item">
              <span class="next-item__no">03</span>
              <div class="next-item__body">
                <h3 class="next-item__title">想先装一遍，再决定怎么用</h3>
                <p class="next-item__text">体验中心把四端能力、上手四步和旧版本资料清单放在一起，先看清每端能做什么，再挑一台设备试。</p>
              </div>
              <a class="next-item__link" href="/experience/">去体验中心</a>
            </li>
          </ul>
        </section>

      </div>

      <aside class="split-layout__rail">
        <div class="index-rail" id="index-rail" data-open="true">
          <div class="index-rail__head">
            <span class="index-rail__title">本月索引</span>
            <span class="index-rail__count">第 12 条</span>
          </div>
          <ol class="index-rail__list">
            <li>
              <a class="index-rail__link" href="#record-12" data-rail-link data-entry-text="第12条记录 换设备">
                <span class="index-rail__no">01</span>第 12 条记录
              </a>
            </li>
            <li>
              <a class="index-rail__link" href="#paths" data-rail-link data-entry-text="两类重新登录路径">
                <span class="index-rail__no">02</span>两类登录路径
              </a>
            </li>
            <li>
              <a class="index-rail__link" href="#steps" data-rail-link data-entry-text="迁移三个动作">
                <span class="index-rail__no">03</span>迁移三个动作
              </a>
            </li>
            <li>
              <a class="index-rail__link" href="#archive" data-rail-link data-entry-text="旧版本资料清单">
                <span class="index-rail__no">04</span>旧版本资料
              </a>
            </li>
            <li>
              <a class="index-rail__link" href="#scope" data-rail-link data-entry-text="本月调整区间 服务范围">
                <span class="index-rail__no">05</span>调整与服务范围
              </a>
            </li>
            <li>
              <a class="index-rail__link" href="#next" data-rail-link data-entry-text="继续核验的去处">
                <span class="index-rail__no">06</span>接下来去哪儿
              </a>
            </li>
          </ol>
        </div>
      </aside>
    </div>

  </div>
</main>

.page-home{
  --home-soft: rgba(242,236,225,.76);
  --home-line: rgba(216,208,193,.24);
  --home-line-soft: rgba(216,208,193,.14);
  --home-gap: clamp(28px,4vw,56px);
  padding-top: calc(var(--header-h) + clamp(16px,3vw,40px));
  padding-bottom: clamp(56px,8vw,104px);
  background: var(--ink-900);
  color: var(--paper-100);
  font-family: var(--font-body);
}

.page-home [id]{ scroll-margin-top: calc(var(--header-h) + 28px); }

/* ---------- 页面上下文 ---------- */
.page-home .page-context{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(22px,3vw,40px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--gray-500);
}
.page-home .page-context__brand{ color: var(--cyan-400); }
.page-home .page-context__sep{ color: var(--home-line); }
.page-home .page-context__current{ color: var(--home-soft); }
.page-home .page-context__stamp{
  padding: 3px 10px;
  border: 1px solid var(--signal-500);
  border-radius: 2px;
  color: var(--signal-300);
  font-weight: 600;
}
@media (min-width: 720px){
  .page-home .page-context__stamp{ margin-left: auto; }
}

/* ---------- 分屏骨架 ---------- */
.page-home .split-layout{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px,5vw,56px);
}
.page-home .split-layout__main{ min-width: 0; }
.page-home .split-layout__rail{ min-width: 0; }
@media (min-width: 1180px){
  .page-home .split-layout{
    grid-template-columns: minmax(0,1.62fr) minmax(0,1fr);
    align-items: start;
  }
}

/* ---------- 右侧本月索引条 ---------- */
.page-home .index-rail{
  position: relative;
  padding: 18px 18px 16px;
  border: 1px solid var(--home-line-soft);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, var(--ink-700) 0%, rgba(16,38,58,.62) 58%, rgba(8,19,31,0) 100%);
}
.page-home .index-rail::before{
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  width: 2px;
  height: 62%;
  background: linear-gradient(180deg, var(--cyan-400), rgba(47,217,198,0));
  pointer-events: none;
}
@media (min-width: 1180px){
  .page-home .index-rail{
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
}
.page-home .index-rail__head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--home-line);
}
.page-home .index-rail__title{
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--paper-100);
}
.page-home .index-rail__count{
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--signal-300);
}
.page-home .index-rail__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.page-home .index-rail__link{
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 10px;
  border-left: 2px solid transparent;
  border-radius: 0 2px 2px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.page-home .index-rail__link:hover{
  color: var(--paper-100);
  background: rgba(242,236,225,.05);
}
.page-home .index-rail__link:focus-visible{
  outline: 2px solid var(--cyan-400);
  outline-offset: 3px;
}
.page-home .index-rail__link[aria-current="true"]{
  color: var(--paper-100);
  border-left-color: var(--signal-500);
  background: rgba(255,107,44,.10);
}
.page-home .index-rail__no{
  flex: 0 0 auto;
  min-width: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--cyan-400);
}
.page-home .index-rail__link[aria-current="true"] .index-rail__no{ color: var(--signal-300); }

@media (max-width: 1179px){
  .page-home .split-layout__rail{ order: -1; }
  .page-home .index-rail{ padding: 14px 16px 12px; }
  .page-home .index-rail__list{
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .page-home .index-rail__list > li{ flex: 0 0 auto; }
  .page-home .index-rail__link{
    border-left: 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    padding: 7px 10px;
  }
  .page-home .index-rail__link[aria-current="true"]{
    border-left: 0;
    border-bottom-color: var(--signal-500);
  }
}

/* ---------- 标题与导语 ---------- */
.page-home .page-title{
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 6vw, 62px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--paper-100);
  text-wrap: balance;
}
.page-home .page-title__no{
  display: block;
  width: fit-content;
  margin-bottom: 14px;
  padding: 3px 9px;
  border: 1px solid var(--signal-500);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: clamp(12px,1.3vw,14px);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--signal-300);
}
.page-home .lead__intro{
  max-width: 34em;
  margin: 0 0 clamp(26px,3.4vw,40px);
  font-size: clamp(16px,1.6vw,18px);
  line-height: 1.85;
  color: var(--home-soft);
}

/* ---------- 本月目录 ---------- */
.page-home .month-catalog{ margin-bottom: clamp(26px,3.4vw,40px); }
.page-home .month-catalog__head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.page-home .month-catalog__head .sub-title{
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--paper-100);
}
.page-home .catalog-list{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--home-line-soft);
}
.page-home .catalog-item{
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 8px;
  border-bottom: 1px solid var(--home-line-soft);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.page-home .catalog-item--current{
  background: linear-gradient(90deg, rgba(255,107,44,.16), rgba(255,107,44,0));
  color: var(--paper-100);
}
.page-home .catalog-item__no{
  flex: 0 0 auto;
  min-width: 4.4em;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--cyan-400);
}
.page-home .catalog-item--current .catalog-item__no{ color: var(--signal-300); }
.page-home .catalog-item__title{
  flex: 1 1 auto;
  min-width: 0;
}
.page-home .catalog-item .tag{ flex: 0 0 auto; }
.page-home .catalog-foot{ margin: 14px 0 0; }

/* ---------- 第 12 条记录卡 ---------- */
.page-home .record-head{
  position: relative;
  padding: clamp(20px,2.6vw,30px);
  border: 1px solid var(--home-line-soft);
  border-left: 3px solid var(--signal-500);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(16,38,58,.95), rgba(8,19,31,.75));
}
.page-home .record-head__top{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.page-home .record-head__title{
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(19px,2.3vw,25px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--paper-100);
}
.page-home .record-head__text{
  max-width: 34em;
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--home-soft);
}
.page-home .record-head__meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px dashed var(--home-line);
}
.page-home .record-head__id{
  font-size: 13px;
  color: var(--gray-500);
}
.page-home .record-head__id code{
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--cyan-400);
}
.page-home .copy-btn{
  padding: 7px 14px;
  border: 1px solid var(--home-line);
  border-radius: 2px;
  background: transparent;
  color: var(--paper-100);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.page-home .copy-btn:hover{
  border-color: var(--signal-500);
  color: var(--signal-300);
}
.page-home .copy-btn.is-copied{
  border-color: var(--cyan-400);
  color: var(--cyan-200);
  background: rgba(47,217,198,.12);
}
.page-home .copy-btn:focus-visible{
  outline: 2px solid var(--cyan-400);
  outline-offset: 3px;
}

/* ---------- 首屏图 ---------- */
.page-home .lead__figure{ margin: clamp(28px,3.6vw,44px) 0 0; }

/* ---------- 通用图注与章节 ---------- */
.page-home .figure{ margin: 0; }
.page-home .figure__media{
  overflow: hidden;
  border: 1px solid var(--home-line-soft);
  border-radius: var(--radius);
  background: var(--ink-700);
}
.page-home .figure__media img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}
.page-home .figure__caption{
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--gray-500);
}

.page-home .block{ margin-block: clamp(52px,7vw,104px); }
.page-home .section-head{
  max-width: 44em;
  margin-bottom: clamp(20px,2.8vw,32px);
}
.page-home .section-title{
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(23px,3vw,34px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--paper-100);
}
.page-home .section-title::after{
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin-top: 12px;
  background: var(--cyan-400);
}
.page-home .section-lead{
  max-width: 36em;
  margin: 0;
  font-size: 16px;
  line-height: 1.85;
  color: var(--home-soft);
}
@media (max-width: 900px){
  .page-home .measure-72,
  .page-home .measure-86,
  .page-home .measure-100{ max-width: 100%; }
}

/* ---------- 两类路径 ---------- */
.page-home .paths-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px,3.6vw,40px);
}
@media (min-width: 900px){
  .page-home .paths-grid{
    grid-template-columns: minmax(0,1.62fr) minmax(0,1fr);
    align-items: start;
  }
}
.page-home .tabs{ position: relative; }
.page-home .tablist{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--home-line);
  padding-bottom: 0;
}
.page-home .tab{
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  border-radius: 2px 2px 0 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.page-home .tab:hover{ color: var(--paper-100); background: rgba(242,236,225,.06); }
.page-home .tab[aria-selected="true"]{
  color: var(--ink-900);
  background: var(--paper-100);
  border-bottom-color: var(--signal-500);
  font-weight: 700;
}
.page-home .tab:focus-visible{
  outline: 2px solid var(--cyan-400);
  outline-offset: 3px;
}
.page-home .tabpanel{
  padding: clamp(20px,2.6vw,30px);
  border: 1px solid var(--paper-300);
  border-radius: var(--radius);
  background: var(--paper-100);
  color: var(--text-900);
  box-shadow: 7px 7px 0 0 rgba(216,208,193,.30);
  animation: home-tab-in 200ms var(--ease) both;
}
.page-home .tabpanel[hidden]{ display: none; }
@keyframes home-tab-in{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}
.page-home .path-facts{
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.page-home .path-fact{
  display: grid;
  grid-template-columns: 5.6em minmax(0,1fr);
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(14,28,40,.18);
  font-size: 15px;
  line-height: 1.78;
}
.page-home .path-fact:last-child{ border-bottom: 0; padding-bottom: 0; }
.page-home .path-fact__key{
  padding-top: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gray-500);
}
.page-home .path-fact__value{ color: var(--text-900); }
.page-home .tabpanel .note{
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--gray-500);
}
@media (max-width: 520px){
  .page-home .path-fact{ grid-template-columns: 1fr; gap: 4px; }
}
.page-home .paths-figure .figure__media{ background: var(--ink-700); }

/* ---------- 编号步骤卡 ---------- */
.page-home .steps-figure{ margin-bottom: clamp(24px,3vw,36px); }
.page-home .step-list{
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.page-home .step-list > li{
  position: relative;
  margin-bottom: 16px;
  padding: clamp(18px,2.4vw,26px);
  border: 1px solid var(--home-line-soft);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(16,38,58,.92), rgba(8,19,31,.92));
}
.page-home .step-list > li::after{
  content: "";
  position: absolute;
  left: 30px;
  bottom: -17px;
  width: 1px;
  height: 16px;
  background: var(--home-line);
}
.page-home .step-list > li:last-child::after{ display: none; }
.page-home .step__no{
  display: inline-block;
  margin-bottom: 12px;
  padding: 2px 9px;
  border-radius: 2px;
  background: var(--signal-500);
  color: var(--ink-900);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
}
.page-home .step__title{
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(17px,2vw,20px);
  font-weight: 700;
  line-height: 1.45;
  color: var(--paper-100);
}
.page-home .step__text{
  max-width: 34em;
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--home-soft);
}
.page-home .step__check{
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid rgba(47,217,198,.55);
  font-size: 13px;
  line-height: 1.75;
  color: var(--cyan-200);
}

/* ---------- 旧版本资料清单 ---------- */
.page-home .archive-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px,3.6vw,40px);
}
@media (min-width: 940px){
  .page-home .archive-grid{
    grid-template-columns: minmax(0,1.55fr) minmax(0,1fr);
    align-items: start;
  }
}
.page-home .archive-list{ min-width: 0; }
.page-home .fold{
  margin-bottom: 12px;
  border: 1px solid var(--paper-300);
  border-radius: var(--radius);
  background: var(--paper-100);
  overflow: hidden;
}
.page-home .fold__summary{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  padding: 15px 18px;
  list-style: none;
  cursor: pointer;
  background: rgba(216,208,193,.32);
  color: var(--text-900);
  transition: background-color var(--dur) var(--ease);
}
.page-home .fold__summary::-webkit-details-marker{ display: none; }
.page-home .fold__summary:hover{ background: rgba(216,208,193,.52); }
.page-home .fold__summary:focus-visible{
  outline: 2px solid var(--cyan-400);
  outline-offset: -2px;
}
.page-home .fold[open] > .fold__summary{
  border-bottom: 1px solid var(--paper-300);
}
.page-home .fold__summary::after{
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--signal-500);
}
.page-home .fold[open] > .fold__summary::after{ content: "−"; }
.page-home .archive-ver{
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--signal-500);
}
.page-home .archive-name{
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-900);
}
.page-home .archive-state{
  flex: 0 0 auto;
  padding: 2px 8px;
  border: 1px solid rgba(14,28,40,.22);
  border-radius: 2px;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--gray-500);
}
.page-home .fold__body{
  padding: 16px 18px 18px;
  background: var(--paper-100);
}
.page-home .archive-facts{ margin: 0; }
.page-home .archive-fact{
  display: grid;
  grid-template-columns: 5.2em minmax(0,1fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(14,28,40,.16);
  font-size: 14px;
  line-height: 1.78;
}
.page-home .archive-fact:last-child{ border-bottom: 0; padding-bottom: 0; }
.page-home .archive-fact:first-child{ padding-top: 0; }
.page-home .archive-fact dt{
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gray-500);
}
.page-home .archive-fact dd{ margin: 0; color: var(--text-900); }
@media (max-width: 520px){
  .page-home .archive-fact{ grid-template-columns: 1fr; gap: 3px; }
}
.page-home .archive-more{ margin: 18px 0 0; }

/* ---------- 调整区间与服务范围 ---------- */
.page-home .scope-table-wrap{
  overflow-x: auto;
  border: 1px solid var(--home-line-soft);
  border-radius: var(--radius);
}
.page-home .scope-table{
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.7;
}
.page-home .scope-table th,
.page-home .scope-table td{
  padding: 13px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--home-line-soft);
}
.page-home .scope-table tr:last-child th,
.page-home .scope-table tr:last-child td{ border-bottom: 0; }
.page-home .scope-table th{
  width: 34%;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--cyan-400);
  white-space: nowrap;
}
.page-home .scope-table td{ color: var(--paper-100); }
.page-home .scope-table tbody tr:nth-child(even){ background: rgba(16,38,58,.7); }
.page-home .scope-foot{
  max-width: 40em;
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--gray-500);
}
.page-home .scope-foot a{
  color: var(--cyan-400);
  text-decoration: none;
  border-bottom: 1px solid rgba(47,217,198,.4);
}
.page-home .scope-foot a:hover{ color: var(--cyan-200); }

/* ---------- 接下来去哪儿 ---------- */
.page-home .next-list{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--home-line);
}
.page-home .next-item{
  display: grid;
  grid-template-columns: 2.6em minmax(0,1fr);
  gap: 6px 16px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--home-line-soft);
}
.page-home .next-item__no{
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--signal-300);
}
.page-home .next-item__body{ min-width: 0; }
.page-home .next-item__title{
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(16px,1.9vw,19px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--paper-100);
}
.page-home .next-item__text{
  max-width: 34em;
  margin: 0;
  font-size: 15px;
  line-height: 1.82;
  color: var(--home-soft);
}
.page-home .next-item__link{
  grid-column: 2;
  display: inline-block;
  width: fit-content;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--cyan-400);
  text-decoration: none;
  border-bottom: 1px solid rgba(47,217,198,.45);
  padding-bottom: 2px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.page-home .next-item__link:hover{ color: var(--cyan-200); border-bottom-color: var(--cyan-200); }
.page-home .next-item__link:focus-visible{
  outline: 2px solid var(--cyan-400);
  outline-offset: 3px;
}
@media (min-width: 760px){
  .page-home .next-item{
    grid-template-columns: 2.6em minmax(0,1fr) auto;
    align-items: start;
  }
  .page-home .next-item__link{
    grid-column: 3;
    margin-top: 2px;
    white-space: nowrap;
  }
}

/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion: reduce){
  .page-home .tabpanel{ animation: none; }
  .page-home .index-rail__link,
  .page-home .copy-btn,
  .page-home .tab,
  .page-home .fold__summary,
  .page-home .next-item__link{ transition: none; }
}
<<<END>>>