.page-products {
  --pd-line: rgba(174, 187, 199, 0.22);
  --pd-line-soft: rgba(174, 187, 199, 0.13);
  --pd-panel: rgba(19, 42, 61, 0.66);
  --pd-void: rgba(6, 19, 30, 0.55);
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
}

.page-products p {
  margin: 0 0 14px;
  line-height: 1.75;
}

.page-products h1,
.page-products h2,
.page-products h3 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--paper);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.page-products h1 {
  font-size: clamp(30px, 6.4vw, 46px);
  margin-bottom: 18px;
}

.page-products h2 {
  font-size: clamp(24px, 4.2vw, 34px);
  margin-bottom: 14px;
}

.page-products h3 {
  font-size: clamp(19px, 2.6vw, 23px);
  margin-bottom: 10px;
}

.page-products a {
  color: var(--cyan);
}

.page-products .eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--cyan);
}

.page-products .media {
  display: block;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--pd-line);
  border-radius: var(--r-md);
  background: var(--ink-2);
}

.page-products .media__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-products .media__label {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--mist);
}

.page-products .pd-hero {
  padding: clamp(26px, 5vw, 56px) 0 clamp(34px, 5vw, 60px);
  background:
    radial-gradient(120% 90% at 84% -14%, rgba(35, 211, 199, 0.16), transparent 62%),
    radial-gradient(90% 70% at 6% 8%, rgba(122, 108, 255, 0.12), transparent 60%),
    var(--ink);
}

.page-products .breadcrumbs {
  margin-bottom: clamp(22px, 4vw, 40px);
  font-size: 13px;
}

.page-products .pd-hero__grid {
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.page-products .pd-lede {
  max-width: 44em;
  font-size: clamp(15px, 1.7vw, 17px);
  color: var(--text);
}

.page-products .pd-lede--sub {
  color: var(--mist);
  font-size: clamp(14px, 1.5vw, 15px);
}

.page-products .pd-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-products .pd-hero__media {
  margin-top: 0;
}

.page-products .pd-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
  margin: clamp(28px, 4vw, 46px) 0 0;
  padding: 22px 0 0;
  list-style: none;
  border-top: 1px solid var(--pd-line);
}

.page-products .pd-facts__num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(22px, 3vw, 28px);
  color: var(--cyan);
  line-height: 1.2;
}

.page-products .pd-facts__label {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--mist);
}

.page-products .pd-sec {
  padding: clamp(40px, 7vw, 82px) 0;
}

.page-products .pd-sec--alt {
  background: var(--ink-2);
}

.page-products .pd-sec--deep {
  background: var(--deep);
}

.page-products .pd-sec-head {
  max-width: 60ch;
  margin-bottom: clamp(22px, 3vw, 34px);
}

.page-products .pd-sec-head p {
  color: var(--mist);
  font-size: 15px;
}

.page-products .pd-console {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 34px);
}

.page-products .pd-rail {
  padding: 18px;
  border: 1px solid var(--pd-line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(19, 42, 61, 0.92), rgba(11, 27, 43, 0.62));
}

.page-products .pd-rail__title {
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--cyan);
}

.page-products .pd-rail__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .pd-rail__item {
  padding: 12px 0;
  border-top: 1px dashed rgba(174, 187, 199, 0.16);
}

.page-products .pd-rail__item:first-child {
  border-top: 0;
}

.page-products .pd-rail__cond {
  margin: 0;
  font-size: 13px;
  color: var(--paper);
}

.page-products .pd-rail__rec {
  margin: 4px 0 6px;
  font-size: 13px;
  color: var(--mist);
}

.page-products .pd-rail__link {
  font-family: var(--font-mono);
  font-size: 12px;
  text-decoration: none;
  color: var(--cyan);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t) var(--ease);
}

.page-products .pd-rail__link:hover,
.page-products .pd-rail__link:focus-visible {
  border-bottom-color: var(--cyan);
}

.page-products .pd-picks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.page-products .pd-pick {
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--pd-line);
  border-radius: var(--r-lg);
  background: var(--pd-panel);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease);
}

.page-products .pd-pick:hover {
  transform: translateY(-2px);
}

.page-products .pd-pick--desktop {
  box-shadow: inset 0 2px 0 rgba(35, 211, 199, 0.6);
}

.page-products .pd-pick--desktop:hover {
  border-color: rgba(35, 211, 199, 0.5);
}

.page-products .pd-pick--web {
  background: linear-gradient(180deg, rgba(255, 138, 61, 0.08), rgba(19, 42, 61, 0.72));
  box-shadow: inset 0 2px 0 rgba(255, 138, 61, 0.6);
}

.page-products .pd-pick--web:hover {
  border-color: rgba(255, 138, 61, 0.5);
}

.page-products .pd-pick__sign {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--cyan);
}

.page-products .pd-pick--web .pd-pick__sign {
  color: var(--orange);
}

.page-products .pd-pick__lead {
  font-size: 15px;
  color: var(--text);
}

.page-products .pd-pick__specs {
  margin: 16px 0;
  padding: 0;
}

.page-products .pd-pick__specs div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--pd-line-soft);
}

.page-products .pd-pick__specs dt {
  font-size: 13px;
  color: var(--mist);
}

.page-products .pd-pick__specs dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--paper);
  text-align: right;
}

.page-products .pd-pick__who {
  margin: 0;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text);
  border-left: 2px solid var(--cyan);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: rgba(35, 211, 199, 0.08);
}

.page-products .pd-pick--web .pd-pick__who {
  border-left-color: var(--orange);
  background: rgba(255, 138, 61, 0.1);
}

.page-products .pd-pick__cta {
  margin-top: 18px;
}

.page-products .pd-matrix {
  margin-top: clamp(22px, 3vw, 34px);
  overflow: hidden;
  border: 1px solid var(--pd-line);
  border-radius: var(--r-md);
  background: var(--pd-void);
}

.page-products .pd-matrix__cap {
  display: block;
  padding: 13px 16px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--mist);
  text-align: left;
  border-bottom: 1px solid var(--pd-line);
  background: rgba(19, 42, 61, 0.7);
}

.page-products .pd-matrix table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.page-products .pd-matrix th,
.page-products .pd-matrix td {
  padding: 11px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--pd-line-soft);
  line-height: 1.6;
}

.page-products .pd-matrix thead th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cyan);
  background: rgba(19, 42, 61, 0.85);
}

.page-products .pd-matrix thead th:nth-child(3) {
  color: var(--orange);
}

.page-products .pd-matrix tbody th {
  font-weight: 500;
  color: var(--paper);
}

.page-products .pd-matrix tbody td {
  color: var(--text);
}

.page-products .pd-matrix tbody tr {
  transition: background var(--t) var(--ease);
}

.page-products .pd-matrix tbody tr:hover {
  background: rgba(35, 211, 199, 0.08);
}

.page-products .pd-matrix tbody tr:hover th {
  color: var(--cyan);
}

.page-products .pd-matrix tbody tr:last-child th,
.page-products .pd-matrix tbody tr:last-child td {
  border-bottom: 0;
}

.page-products .pd-desktop {
  background:
    linear-gradient(180deg, rgba(11, 27, 43, 1), rgba(11, 27, 43, 0.86)),
    var(--ink);
}

.page-products .pd-desktop__grid {
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}

.page-products .pd-panel {
  padding: 18px;
  border: 1px solid rgba(35, 211, 199, 0.32);
  border-radius: var(--r-md);
  background: linear-gradient(160deg, rgba(19, 42, 61, 0.96), rgba(6, 19, 30, 0.92));
}

.page-products .pd-panel__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--mist);
}

.page-products .pd-panel__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 9px 0;
  font-family: var(--font-mono);
  font-size: 13px;
  border-top: 1px dashed rgba(174, 187, 199, 0.18);
}

.page-products .pd-panel__key {
  color: var(--mist);
}

.page-products .pd-panel__val {
  color: var(--cyan);
}

.page-products .pd-panel__val--orange {
  color: var(--orange);
}

.page-products .pd-panel__bar {
  height: 6px;
  margin: 14px 0 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(174, 187, 199, 0.18);
}

.page-products .pd-panel__bar span {
  display: block;
  width: 72%;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
}

.page-products .pd-points {
  display: grid;
  gap: 14px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .pd-points li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
}

.page-products .pd-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border: 1px solid var(--cyan);
  transform: rotate(45deg);
}

.page-products .pd-points strong {
  color: var(--paper);
}

.page-products .pd-web {
  background: var(--pale);
  color: var(--slate);
}

.page-products .pd-web h2,
.page-products .pd-web h3 {
  color: var(--ink);
}

.page-products .pd-web p {
  color: var(--slate);
}

.page-products .pd-web .eyebrow {
  color: var(--ink);
}

.page-products .pd-web .pd-sec-head p {
  color: var(--slate);
}

.page-products .pd-web .media {
  border-color: rgba(11, 27, 43, 0.16);
  background: rgba(255, 255, 255, 0.7);
}

.page-products .pd-web__grid {
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
}

.page-products .pd-weblist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .pd-weblist__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 13px;
  font-size: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(11, 27, 43, 0.14);
  border-radius: var(--r-sm);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}

.page-products .pd-weblist__item:hover {
  border-color: var(--cyan);
  transform: translateX(2px);
}

.page-products .pd-weblist__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--slate);
}

.page-products .pd-check {
  background:
    radial-gradient(80% 60% at 10% 0%, rgba(35, 211, 199, 0.1), transparent 60%),
    var(--ink);
}

.page-products .pd-check__list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .pd-check__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 15px 16px;
  border: 1px solid var(--pd-line);
  border-radius: var(--r-md);
  background: rgba(19, 42, 61, 0.55);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.page-products .pd-check__item:hover {
  border-color: rgba(35, 211, 199, 0.45);
}

.page-products .pd-check__item:has(input:checked) {
  border-color: rgba(35, 211, 199, 0.6);
  background: rgba(35, 211, 199, 0.1);
}

.page-products .pd-check__box {
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  border: 1px solid var(--mist);
  border-radius: 4px;
  background: rgba(6, 19, 30, 0.72);
  position: relative;
  flex: none;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}

.page-products .pd-check__box:checked {
  background: var(--cyan);
  border-color: var(--cyan);
}

.page-products .pd-check__box:checked::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 4px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--deep);
  border-bottom: 2px solid var(--deep);
  transform: rotate(45deg);
}

.page-products .pd-check__box:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

.page-products .pd-check__text {
  cursor: pointer;
}

.page-products .pd-check__name {
  display: block;
  font-size: 15px;
  color: var(--paper);
}

.page-products .pd-check__hint {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mist);
}

.page-products .pd-check__foot {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--mist);
}

.page-products .pd-check__foot a {
  margin-left: 6px;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(35, 211, 199, 0.5);
}

.page-products .pd-version .pd-impact {
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid var(--pd-line);
  border-radius: var(--r-md);
  background: var(--pd-void);
}

.page-products .pd-version .pd-impact summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  font-size: 14px;
  color: var(--paper);
  cursor: pointer;
  list-style: none;
}

.page-products .pd-version .pd-impact summary::-webkit-details-marker {
  display: none;
}

.page-products .pd-version .pd-impact summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--cyan);
}

.page-products .pd-version .pd-impact[open] summary::after {
  content: "−";
}

.page-products .pd-impact__body {
  padding: 14px 18px 4px;
  border-top: 1px solid var(--pd-line);
}

.page-products .pd-impact__body p {
  font-size: 14px;
  color: var(--text);
}

.page-products .pd-timeline {
  display: grid;
  gap: 22px;
  margin: 20px 0 0;
  padding: 0 0 0 22px;
  list-style: none;
  border-left: 1px solid rgba(35, 211, 199, 0.35);
}

.page-products .pd-timeline__item {
  position: relative;
}

.page-products .pd-timeline__item::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(35, 211, 199, 0.16);
}

.page-products .pd-timeline__when {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--orange);
}

.page-products .pd-timeline__what {
  margin: 5px 0 0;
  font-size: 15px;
  color: var(--paper);
}

.page-products .pd-steps {
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
}

.page-products .pd-steps__list {
  display: grid;
  gap: 14px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .pd-steps__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--pd-line);
  border-radius: var(--r-md);
  background: rgba(19, 42, 61, 0.5);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}

.page-products .pd-steps__item:hover {
  border-color: rgba(122, 108, 255, 0.5);
  transform: translateX(2px);
}

.page-products .pd-steps__num {
  font-size: 18px;
  line-height: 1.3;
  color: var(--cyan);
}

.page-products .pd-steps__text {
  margin: 0;
  font-size: 15px;
  color: var(--text);
}

.page-products .pd-steps__text strong {
  color: var(--paper);
}

.page-products .pd-steps__note {
  margin-top: 18px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--mist);
  border-left: 2px solid var(--violet);
  background: rgba(122, 108, 255, 0.08);
}

.page-products .pd-help__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.page-products .pd-help__card {
  padding: 18px;
  border-top: 2px solid var(--cyan);
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: rgba(19, 42, 61, 0.6);
}

.page-products .pd-help__card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.page-products .pd-help__card p {
  font-size: 14px;
  color: var(--mist);
}

.page-products .pd-help__link {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(35, 211, 199, 0.45);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.page-products .pd-help__link:hover {
  color: var(--violet);
  border-bottom-color: var(--violet);
}

.page-products .pd-help__foot {
  margin-top: 22px;
  font-size: 13px;
  color: var(--mist);
}

@media (min-width: 600px) {
  .page-products .pd-weblist {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .pd-help__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  .page-products .pd-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-products .pd-picks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-products .pd-weblist {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-products .pd-help__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .page-products .pd-hero__media {
    margin-top: 26px;
  }
}

@media (min-width: 1000px) {
  .page-products .pd-console {
    grid-template-columns: 236px minmax(0, 1fr);
    align-items: start;
  }

  .page-products .pd-rail {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
}

@media (max-width: 599px) {
  .page-products .pd-matrix table {
    font-size: 12.5px;
  }

  .page-products .pd-matrix th,
  .page-products .pd-matrix td {
    padding: 9px 8px;
  }

  .page-products .pd-matrix tbody th {
    width: 32%;
  }

  .page-products .pd-hero__actions .btn {
    flex: 1 1 auto;
    text-align: center;
  }
}
<<<PAGE_CSS_END>>>
<<<END>>>
```
等等——我只应输出两个标记。上面多写了分隔与围栏。重新按格式输出正确内容。

（按格式直接输出 MAIN_HTML 与 PAGE_CSS 两块，不加其他。）
<main id="main-content" class="page-products">
  <section class="pd-hero" aria-labelledby="pd-title">
    <div class="shell">
      <nav class="breadcrumbs" aria-label="当前位置">
        <ol>
          <li><a href="/">呼号首页</a></li>
          <li aria-current="page">客户端下载</li>
        </ol>
      </nav>
      <div class="grid-12 pd-hero__grid">
        <div class="span-7 pd-hero__copy">
          <p class="eyebrow mono">02 / 客户端下载</p>
          <h1 id="pd-title">两条入口怎么选：桌面端正式版与中文版</h1>
          <p class="pd-lede">188电子指南把同一套 2460 条可检索条目做成了两种进入方式，按设备和打开频率挑一个就好。每天要翻好几次资料的，装桌面端188电子正式版，索引落在本机，冷启动平均 1.8 秒；换电脑、借用设备，或者第一次把栏目整体看一遍的，走电子中文版进入，首屏就把 12 个高频栏目摆在眼前。</p>
          <p class="pd-lede pd-lede--sub">两个入口共用同一套编号与版本对照，您收藏的栏目、看到的版本，换个入口仍然对得上。</p>
          <div class="pd-hero__actions">
            <a class="btn btn--primary" href="#entry">对比两个入口</a>
            <a class="btn btn--ghost" href="#checklist">先做适配自检</a>
          </div>
        </div>
        <div class="span-5 pd-hero__media">
          <figure class="media media--16x9 media--grid">
            <img class="media__img" src="{zhanqunpic:h:1000w:1600}" width="1600" height="1000" alt="桌面端资料库界面局部，左侧为编号导航栏，右侧显示索引状态与检索框">
            <figcaption class="media__label mono">桌面端 · 编号导航与索引状态</figcaption>
          </figure>
        </div>
      </div>
      <ul class="pd-facts">
        <li class="pd-facts__item">
          <span class="pd-facts__num">2460</span>
          <span class="pd-facts__label">条可检索条目</span>
        </li>
        <li class="pd-facts__item">
          <span class="pd-facts__num">38</span>
          <span class="pd-facts__label">个专题归档</span>
        </li>
        <li class="pd-facts__item">
          <span class="pd-facts__num">6</span>
          <span class="pd-facts__label">类资料归档方式</span>
        </li>
        <li class="pd-facts__item">
          <span class="pd-facts__num">1.8s</span>
          <span class="pd-facts__label">桌面端平均冷启动</span>
        </li>
      </ul>
    </div>
  </section>

  <section class="pd-entry pd-sec pd-sec--alt" id="entry" aria-labelledby="entry-title">
    <div class="shell">
      <header class="pd-sec-head">
        <p class="eyebrow mono">选择台</p>
        <h2 id="entry-title">先看您平时怎么用</h2>
        <p>把设备、打开频率和查阅目的对上号，入口就定了。左边按条件快选，右边是两种方式的完整能力对照。</p>
      </header>

      <div class="pd-console">
        <aside class="pd-rail" aria-label="按条件快选入口">
          <p class="pd-rail__title mono">条件快选</p>
          <ul class="pd-rail__list">
            <li class="pd-rail__item">
              <p class="pd-rail__cond">Windows 10 / 11</p>
              <p class="pd-rail__rec">桌面端为主，浏览器随时保底</p>
              <a class="pd-rail__link" href="#desktop">看桌面端</a>
            </li>
            <li class="pd-rail__item">
              <p class="pd-rail__cond">macOS 12 及以上</p>
              <p class="pd-rail__rec">装桌面端，离线缓存更省心</p>
              <a class="pd-rail__link" href="#desktop">看桌面端</a>
            </li>
            <li class="pd-rail__item">
              <p class="pd-rail__cond">只用浏览器 / 借用设备</p>
              <p class="pd-rail__rec">直接走中文版，不装任何程序</p>
              <a class="pd-rail__link" href="#chinese">看中文版</a>
            </li>
            <li class="pd-rail__item">
              <p class="pd-rail__cond">每天打开 3 次以上</p>
              <p class="pd-rail__rec">桌面端，索引缓存在本机</p>
              <a class="pd-rail__link" href="#desktop">看桌面端</a>
            </li>
            <li class="pd-rail__item">
              <p class="pd-rail__cond">第一次系统浏览</p>
              <p class="pd-rail__rec">中文版首屏给出 12 个高频栏目</p>
              <a class="pd-rail__link" href="#chinese">看中文版</a>
            </li>
            <li class="pd-rail__item">
              <p class="pd-rail__cond">屏幕 1366×768 及以上</p>
              <p class="pd-rail__rec">两边都能完整显示</p>
              <a class="pd-rail__link" href="#checklist">去自检</a>
            </li>
          </ul>
        </aside>

        <div class="pd-flow">
          <div class="pd-picks">
            <article class="pd-pick pd-pick--desktop">
              <p class="pd-pick__sign mono">入口 A · 装在本机</p>
              <h3>桌面端188电子正式版</h3>
              <p class="pd-pick__lead">索引缓存在本地，打开就是检索框，不用等页面一层层加载。把资料库当日常工具的人，用它最顺手。</p>
              <dl class="pd-pick__specs">
                <div>
                  <dt>平均冷启动</dt>
                  <dd>1.8 秒</dd>
                </div>
                <div>
                  <dt>离线索引缓存</dt>
                  <dd>支持</dd>
                </div>
                <div>
                  <dt>本地收藏</dt>
                  <dd>支持</dd>
                </div>
                <div>
                  <dt>运行环境</dt>
                  <dd>Win 10/11 · macOS 12+</dd>
                </div>
              </dl>
              <p class="pd-pick__who">适合每天多次查阅、网络时好时坏、习惯在本机留一份收藏的人。</p>
              <a class="btn btn--primary pd-pick__cta" href="#steps">查看安装步骤</a>
            </article>

            <article class="pd-pick pd-pick--web">
              <p class="pd-pick__sign mono">入口 B · 打开即用</p>
              <h3>电子中文版进入</h3>
              <p class="pd-pick__lead">浏览器里直接打开，六类归档与常见说明集中呈现，首屏就能点到 12 个高频栏目。临时设备、首次浏览都合适。</p>
              <dl class="pd-pick__specs">
                <div>
                  <dt>安装步骤</dt>
                  <dd>无需安装</dd>
                </div>
                <div>
                  <dt>首屏直达</dt>
                  <dd>12 个高频栏目</dd>
                </div>
                <div>
                  <dt>归档覆盖</dt>
                  <dd>六类全量</dd>
                </div>
                <div>
                  <dt>浏览器</dt>
                  <dd>Chromium · Firefox</dd>
                </div>
              </dl>
              <p class="pd-pick__who">适合第一次接触资料库、换设备查阅、给团队做集中讲解的场景。</p>
              <a class="btn btn--signal pd-pick__cta" href="#chinese">看中文版栏目</a>
            </article>
          </div>

          <div class="pd-matrix">
            <table class="pd-matrix__table">
              <caption class="pd-matrix__cap">桌面端188电子正式版与电子中文版的能力对照</caption>
              <thead>
                <tr>
                  <th scope="col">对照项</th>
                  <th scope="col">桌面端188电子正式版</th>
                  <th scope="col">电子中文版</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">打开速度</th>
                  <td>冷启动平均 1.8 秒（100Mbps、近三年主流办公电脑）</td>
                  <td>页面加载，取决于当下网络状况</td>
                </tr>
                <tr>
                  <th scope="row">离线使用</th>
                  <td>已缓存的索引与收藏断网可查</td>
                  <td>需要网络连接</td>
                </tr>
                <tr>
                  <th scope="row">栏目覆盖</th>
                  <td>六类归档全量，本地索引按编号、栏目名、版本号检索</td>
                  <td>六类归档加 12 个高频栏目首屏直达</td>
                </tr>
                <tr>
                  <th scope="row">收藏方式</th>
                  <td>收藏保存在本机面板，换设备时可重新添加</td>
                  <td>随浏览器保存，可用打印或截图带走</td>
                </tr>
                <tr>
                  <th scope="row">系统与环境</th>
                  <td>Windows 10/11、macOS 12 及以上</td>
                  <td>主流 Chromium 与 Firefox 浏览器</td>
                </tr>
                <tr>
                  <th scope="row">屏幕适配</th>
                  <td>1366×768 及以上，常见高分屏缩放比例下布局完整</td>
                  <td>1366×768 及以上，常见高分屏缩放比例下布局完整</td>
                </tr>
                <tr>
                  <th scope="row">更适合</th>
                  <td>高频查阅、需要离线、长期固定设备</td>
                  <td>首次浏览、临时设备、团队集中培训</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="pd-sec pd-desktop" id="desktop" aria-labelledby="desktop-title">
    <div class="shell">
      <div class="grid-12 pd-desktop__grid">
        <div class="span-5">
          <div class="pd-panel" aria-hidden="true">
            <p class="pd-panel__head"><span>STATUS · 本机索引</span><span>188-CN</span></p>
            <p class="pd-panel__row"><span class="pd-panel__key">索引缓存</span><span class="pd-panel__val">已就绪</span></p>
            <p class="pd-panel__row"><span class="pd-panel__key">离线可用</span><span class="pd-panel__val">是</span></p>
            <p class="pd-panel__row"><span class="pd-panel__key">收藏条目</span><span class="pd-panel__val">本机保存</span></p>
            <p class="pd-panel__row"><span class="pd-panel__key">当前架构</span><span class="pd-panel__val">3.0</span></p>
            <p class="pd-panel__row"><span class="pd-panel__key">索引维护</span><span class="pd-panel__val pd-panel__val--orange">每月两次</span></p>
            <p class="pd-panel__bar"><span></span></p>
          </div>
        </div>
        <div class="span-7">
          <p class="eyebrow mono">入口 A · 桌面端</p>
          <h2 id="desktop-title">把打开的时间压到最短</h2>
          <p>桌面端的价值在响应速度。2024 年完成 3.0 架构升级后页面平均加载提升 37%，在 100Mbps 网络与近三年主流办公电脑环境下平均冷启动 1.8 秒，点开就能直接输编号。</p>
          <p>索引缓存落在本机，断网时已缓存的条目照样翻得到；站内搜索用本地索引，输入编号、栏目名或版本号都能命中，不用回忆栏目藏在第几层。</p>
          <ul class="pd-points">
            <li><strong>离线也查得到</strong>：已缓存的索引与收藏不依赖网络，出差和弱网环境下依旧是同一个查阅体验。</li>
            <li><strong>收藏跟着工作走</strong>：常看的栏目固定在本地面板，几次点击就形成自己的常用入口。</li>
            <li><strong>跟着索引一起更新</strong>：每月两次索引维护后，本地缓存按节点同步，新条目不会漏。</li>
            <li><strong>屏幕有对应布局</strong>：1366×768 起即可完整显示，高分屏常见缩放比例下排版不挤。</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <section class="pd-sec pd-web" id="chinese" aria-labelledby="chinese-title">
    <div class="shell">
      <header class="pd-sec-head">
        <p class="eyebrow mono">入口 B · 中文版</p>
        <h2 id="chinese-title">一进来就看到全部栏目</h2>
        <p>中文版把六类归档和常见说明集中排列，第一次打开也能知道资料放在哪一层。首屏直接给出 12 个高频栏目，不必逐级点开去找。</p>
      </header>
      <div class="grid-12 pd-web__grid">
        <div class="span-6">
          <figure class="media media--3x2 media--grid">
            <img class="media__img" src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="中文版栏目总览网格，12 个高频入口以编号形式排列在首屏" loading="lazy" decoding="async">
            <figcaption class="media__label mono">中文版 · 首屏 12 个高频入口</figcaption>
          </figure>
        </div>
        <div class="span-6">
          <p>首次访问的用户平均用 3 分钟就能把常用栏目收藏好，之后每次进来直接点收藏面板。团队做集中讲解时，用同一套栏目结构讲一遍，比逐台装客户端省事得多。</p>
          <p>中文版覆盖六类归档：栏目导航、常见说明、版本对照、适配清单、索引公告与场景手册，与桌面端读到的是同一批条目。</p>
          <ul class="pd-weblist">
            <li class="pd-weblist__item"><span class="pd-weblist__num">01</span>编号检索</li>
            <li class="pd-weblist__item"><span class="pd-weblist__num">02</span>栏目总览</li>
            <li class="pd-weblist__item"><span class="pd-weblist__num">03</span>常见说明</li>
            <li class="pd-weblist__item"><span class="pd-weblist__num">04</span>版本对照</li>
            <li class="pd-weblist__item"><span class="pd-weblist__num">05</span>适配清单</li>
            <li class="pd-weblist__item"><span class="pd-weblist__num">06</span>索引公告</li>
            <li class="pd-weblist__item"><span class="pd-weblist__num">07</span>场景手册</li>
            <li class="pd-weblist__item"><span class="pd-weblist__num">08</span>专题归档</li>
            <li class="pd-weblist__item"><span class="pd-weblist__num">09</span>更新记录</li>
            <li class="pd-weblist__item"><span class="pd-weblist__num">10</span>收藏夹</li>
            <li class="pd-weblist__item"><span class="pd-weblist__num">11</span>桌面端指南</li>
            <li class="pd-weblist__item"><span class="pd-weblist__num">12</span>术语表</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <section class="pd-sec pd-check" id="checklist" aria-labelledby="check-title">
    <div class="shell">
      <div class="grid-12">
        <div class="span-7">
          <header class="pd-sec-head">
            <p class="eyebrow mono">适配清单</p>
            <h2 id="check-title">花两分钟做一次自检</h2>
            <p>五类条件决定您更适合哪条入口。全部满足的话，桌面端和中文版都能完整使用；有任意一项对不上，就到问题排查里看对应的处理办法。</p>
          </header>
          <ul class="pd-check__list">
            <li class="pd-check__item">
              <input class="pd-check__box" type="checkbox" id="pd-c1">
              <label class="pd-check__text" for="pd-c1">
                <span class="pd-check__name">操作系统</span>
                <span class="pd-check__hint">Windows 10 / 11，或 macOS 12 及以上，可直接安装桌面端</span>
              </label>
            </li>
            <li class="pd-check__item">
              <input class="pd-check__box" type="checkbox" id="pd-c2">
              <label class="pd-check__text" for="pd-c2">
                <span class="pd-check__name">浏览器</span>
                <span class="pd-check__hint">主流 Chromium 内核浏览器或 Firefox，中文版在这些浏览器里显示完整</span>
              </label>
            </li>
            <li class="pd-check__item">
              <input class="pd-check__box" type="checkbox" id="pd-c3">
              <label class="pd-check__text" for="pd-c3">
                <span class="pd-check__name">屏幕分辨率</span>
                <span class="pd-check__hint">1366×768 及以上，编号导航与对照表不会被裁掉</span>
              </label>
            </li>
            <li class="pd-check__item">
              <input class="pd-check__box" type="checkbox" id="pd-c4">
              <label class="pd-check__text" for="pd-c4">
                <span class="pd-check__name">高分屏缩放</span>
                <span class="pd-check__hint">常见缩放比例下，表格与清单保持单行可读，不需要横向拖动</span>
              </label>
            </li>
            <li class="pd-check__item">
              <input class="pd-check__box" type="checkbox" id="pd-c5">
              <label class="pd-check__text" for="pd-c5">
                <span class="pd-check__name">网络条件</span>
                <span class="pd-check__hint">100Mbps 或稳定宽带，首次同步索引时更顺畅</span>
              </label>
            </li>
          </ul>
          <p class="pd-check__foot">勾选结果会留在当前浏览器里，您可以照着它决定装桌面端还是直接用中文版。<a href="/troubleshooting/">有项目对不上？看问题排查</a></p>
        </div>
        <div class="span-5">
          <figure class="media media--4x3 media--grid">
            <img class="media__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="五类设备与环境检查项的界面化清单，每项带勾选框与状态标记" loading="lazy" decoding="async">
            <figcaption class="media__label mono">适配清单 · 五项检查</figcaption>
          </figure>
        </div>
      </div>
    </div>
  </section>

  <section class="pd-sec pd-sec--alt pd-version" id="versions" aria-labelledby="version-title">
    <div class="shell">
      <div class="grid-12">
        <div class="span-7">
          <header class="pd-sec-head">
            <p class="eyebrow mono">版本节奏</p>
            <h2 id="version-title">每季度一次功能版本，每月两次索引维护</h2>
            <p>桌面端与中文版按同一份索引推进。功能版本每季度发布一次，索引维护每月两次；重大变更会同时放出影响栏目对照表，方便您判断哪些收藏需要重新添加。</p>
          </header>
          <ul class="pd-timeline">
            <li class="pd-timeline__item">
              <p class="pd-timeline__when mono">每季度</p>
              <p class="pd-timeline__what">功能版本发布，客户端能力与界面调整，更新后本地收藏自动接续。</p>
            </li>
            <li class="pd-timeline__item">
              <p class="pd-timeline__when mono">每月两次</p>
              <p class="pd-timeline__what">索引维护：条目增补与纠错复核，内容编辑一般在两个工作日内给出处理结果。</p>
            </li>
            <li class="pd-timeline__item">
              <p class="pd-timeline__when mono">每周四</p>
              <p class="pd-timeline__what">首页公示索引更新，写明版本号、变更范围、影响栏目与处理建议四段信息。</p>
            </li>
            <li class="pd-timeline__item">
              <p class="pd-timeline__when mono">重大变更</p>
              <p class="pd-timeline__what">随公告同步发布影响栏目对照表，标注本次涉及的归档类别与具体栏目。</p>
            </li>
          </ul>
          <details class="pd-impact">
            <summary>展开：一次变更会涉及哪些栏目</summary>
            <div class="pd-impact__body">
              <p>公告按四段写：版本号说明这次是什么性质的变化，变更范围列出被调整的条目，影响栏目点名对应的归档与栏目，处理建议告诉您收藏是否需要重新添加。</p>
              <p>变更范围内涉及的收藏条目会在对照表里单独标注，方便您在桌面端和中文版之间做同样的调整。往期公告可在<a href="/information/">资讯中心</a>按专题翻。</p>
            </div>
          </details>
        </div>
        <div class="span-5">
          <figure class="media media--4x3 media--grid">
            <img class="media__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="版本号、变更范围与影响栏目的对照图谱，以编号节点连接" loading="lazy" decoding="async">
            <figcaption class="media__label mono">版本对照 · 变更范围与影响栏目</figcaption>
          </figure>
        </div>
      </div>
    </div>
  </section>

  <section class="pd-sec pd-steps" id="steps" aria-labelledby="steps-title">
    <div class="shell">
      <div class="grid-12">
        <div class="span-6">
          <header class="pd-sec-head">
            <p class="eyebrow mono">上手步骤</p>
            <h2 id="steps-title">从选入口到收藏，四步完成</h2>
            <p>第一次使用不用摸索太久，按这四步走一遍，之后每次打开都能直接落在您常看的栏目上。</p>
          </header>
          <ol class="pd-steps__list">
            <li class="pd-steps__item">
              <span class="pd-steps__num mono">01</span>
              <p class="pd-steps__text"><strong>先自检</strong>：照着适配清单过一遍设备和浏览器条件，记下没对上的项。</p>
            </li>
            <li class="pd-steps__item">
              <span class="pd-steps__num mono">02</span>
              <p class="pd-steps__text"><strong>选入口</strong>：高频查阅装桌面端，临时或首次浏览用中文版，两边读到的版本一致。</p>
            </li>
            <li class="pd-steps__item">
              <span class="pd-steps__num mono">03</span>
              <p class="pd-steps__text"><strong>完成首次收藏</strong>：桌面端在本地面板添加常用栏目，中文版随浏览器收藏，平均 3 分钟能弄完。</p>
            </li>
            <li class="pd-steps__item">
              <span class="pd-steps__num mono">04</span>
              <p class="pd-steps__text"><strong>记住版本线索</strong>：常看首页索引更新，遇到重大变更按影响栏目对照表调整收藏。</p>
            </li>
          </ol>
          <p class="pd-steps__note">安装包与进入链接请从站内页面获取。遇到要求额外缴费、索要账号密码或跳转到陌生页面的情况，请先通过客服邮箱 service@digital-188.com.cn 与我们确认。</p>
        </div>
        <div class="span-6">
          <figure class="media media--3x2 media--grid">
            <img class="media__img" src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="桌面显示器、笔记本与浏览器窗口的抽象组合，展示两条入口的进入路径" loading="lazy" decoding="async">
            <figcaption class="media__label mono">入口路径 · 本机安装与浏览器直达</figcaption>
          </figure>
        </div>
      </div>
    </div>
  </section>

  <section class="pd-sec pd-sec--deep pd-help" aria-labelledby="help-title">
    <div class="shell">
      <header class="pd-sec-head">
        <p class="eyebrow mono">团队与支持</p>
        <h2 id="help-title">人数一多，就交给批量适配</h2>
        <p>3400+ 团体会员用同一套栏目结构做内部培训和新同事上手。团队规模较大时，我们可以导出适配清单的批量版本，并按版本对照提醒变更，省掉逐台确认的工夫。</p>
      </header>
      <div class="pd-help__grid">
        <article class="pd-help__card">
          <h3>批量适配清单</h3>
          <p>按团队设备情况导出一份清单，装桌面端还是走中文版一目了然。</p>
          <a class="pd-help__link" href="/contact/">联系获取</a>
        </article>
        <article class="pd-help__card">
          <h3>版本对照提醒</h3>
          <p>重大版本发布时同步影响栏目，团体会员可直接对照调整内部收藏。</p>
          <a class="pd-help__link" href="/information/">看索引公告</a>
        </article>
        <article class="pd-help__card">
          <h3>了解我们</h3>
          <p>28 人团队分工在内容编辑、技术支持、产品设计与客户服务上，湖北地区为本地化反馈响应重点。</p>
          <a class="pd-help__link" href="/culture/">看品牌文化</a>
        </article>
      </div>
      <p class="pd-help__foot">工作日 9:00-18:00 可致电 400-5492-2930，或写信到 <a href="/contact/">联系我们</a> 页面列出的邮箱。技术反馈请附截图与访问设备信息，便于快速定位。</p>
    </div>
  </section>
</main>

.page-products {
  --pd-line: rgba(174, 187, 199, 0.22);
  --pd-line-soft: rgba(174, 187, 199, 0.13);
  --pd-panel: rgba(19, 42, 61, 0.66);
  --pd-void: rgba(6, 19, 30, 0.55);
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
}

.page-products p {
  margin: 0 0 14px;
  line-height: 1.75;
}

.page-products h1,
.page-products h2,
.page-products h3 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--paper);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.page-products h1 {
  font-size: clamp(30px, 6.4vw, 46px);
  margin-bottom: 18px;
}

.page-products h2 {
  font-size: clamp(24px, 4.2vw, 34px);
  margin-bottom: 14px;
}

.page-products h3 {
  font-size: clamp(19px, 2.6vw, 23px);
  margin-bottom: 10px;
}

.page-products a {
  color: var(--cyan);
}

.page-products .eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--cyan);
}

.page-products .media {
  display: block;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--pd-line);
  border-radius: var(--r-md);
  background: var(--ink-2);
}

.page-products .media__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-products .media__label {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--mist);
}

.page-products .pd-hero {
  padding: clamp(26px, 5vw, 56px) 0 clamp(34px, 5vw, 60px);
  background:
    radial-gradient(120% 90% at 84% -14%, rgba(35, 211, 199, 0.16), transparent 62%),
    radial-gradient(90% 70% at 6% 8%, rgba(122, 108, 255, 0.12), transparent 60%),
    var(--ink);
}

.page-products .breadcrumbs {
  margin-bottom: clamp(22px, 4vw, 40px);
  font-size: 13px;
}

.page-products .pd-hero__grid {
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.page-products .pd-lede {
  max-width: 44em;
  font-size: clamp(15px, 1.7vw, 17px);
  color: var(--text);
}

.page-products .pd-lede--sub {
  color: var(--mist);
  font-size: clamp(14px, 1.5vw, 15px);
}

.page-products .pd-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-products .pd-hero__media {
  margin-top: 0;
}

.page-products .pd-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
  margin: clamp(28px, 4vw, 46px) 0 0;
  padding: 22px 0 0;
  list-style: none;
  border-top: 1px solid var(--pd-line);
}

.page-products .pd-facts__num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(22px, 3vw, 28px);
  color: var(--cyan);
  line-height: 1.2;
}

.page-products .pd-facts__label {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--mist);
}

.page-products .pd-sec {
  padding: clamp(40px, 7vw, 82px) 0;
}

.page-products .pd-sec--alt {
  background: var(--ink-2);
}

.page-products .pd-sec--deep {
  background: var(--deep);
}

.page-products .pd-sec-head {
  max-width: 60ch;
  margin-bottom: clamp(22px, 3vw, 34px);
}

.page-products .pd-sec-head p {
  color: var(--mist);
  font-size: 15px;
}

.page-products .pd-console {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 34px);
}

.page-products .pd-rail {
  padding: 18px;
  border: 1px solid var(--pd-line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(19, 42, 61, 0.92), rgba(11, 27, 43, 0.62));
}

.page-products .pd-rail__title {
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--cyan);
}

.page-products .pd-rail__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .pd-rail__item {
  padding: 12px 0;
  border-top: 1px dashed rgba(174, 187, 199, 0.16);
}

.page-products .pd-rail__item:first-child {
  border-top: 0;
}

.page-products .pd-rail__cond {
  margin: 0;
  font-size: 13px;
  color: var(--paper);
}

.page-products .pd-rail__rec {
  margin: 4px 0 6px;
  font-size: 13px;
  color: var(--mist);
}

.page-products .pd-rail__link {
  font-family: var(--font-mono);
  font-size: 12px;
  text-decoration: none;
  color: var(--cyan);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t) var(--ease);
}

.page-products .pd-rail__link:hover,
.page-products .pd-rail__link:focus-visible {
  border-bottom-color: var(--cyan);
}

.page-products .pd-picks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.page-products .pd-pick {
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--pd-line);
  border-radius: var(--r-lg);
  background: var(--pd-panel);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease);
}

.page-products .pd-pick:hover {
  transform: translateY(-2px);
}

.page-products .pd-pick--desktop {
  box-shadow: inset 0 2px 0 rgba(35, 211, 199, 0.6);
}

.page-products .pd-pick--desktop:hover {
  border-color: rgba(35, 211, 199, 0.5);
}

.page-products .pd-pick--web {
  background: linear-gradient(180deg, rgba(255, 138, 61, 0.08), rgba(19, 42, 61, 0.72));
  box-shadow: inset 0 2px 0 rgba(255, 138, 61, 0.6);
}

.page-products .pd-pick--web:hover {
  border-color: rgba(255, 138, 61, 0.5);
}

.page-products .pd-pick__sign {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--cyan);
}

.page-products .pd-pick--web .pd-pick__sign {
  color: var(--orange);
}

.page-products .pd-pick__lead {
  font-size: 15px;
  color: var(--text);
}

.page-products .pd-pick__specs {
  margin: 16px 0;
  padding: 0;
}

.page-products .pd-pick__specs div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--pd-line-soft);
}

.page-products .pd-pick__specs dt {
  font-size: 13px;
  color: var(--mist);
}

.page-products .pd-pick__specs dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--paper);
  text-align: right;
}

.page-products .pd-pick__who {
  margin: 0;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text);
  border-left: 2px solid var(--cyan);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: rgba(35, 211, 199, 0.08);
}

.page-products .pd-pick--web .pd-pick__who {
  border-left-color: var(--orange);
  background: rgba(255, 138, 61, 0.1);
}

.page-products .pd-pick__cta {
  margin-top: 18px;
}

.page-products .pd-matrix {
  margin-top: clamp(22px, 3vw, 34px);
  overflow: hidden;
  border: 1px solid var(--pd-line);
  border-radius: var(--r-md);
  background: var(--pd-void);
}

.page-products .pd-matrix__cap {
  display: block;
  padding: 13px 16px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--mist);
  text-align: left;
  border-bottom: 1px solid var(--pd-line);
  background: rgba(19, 42, 61, 0.7);
}

.page-products .pd-matrix table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.page-products .pd-matrix th,
.page-products .pd-matrix td {
  padding: 11px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--pd-line-soft);
  line-height: 1.6;
}

.page-products .pd-matrix thead th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cyan);
  background: rgba(19, 42, 61, 0.85);
}

.page-products .pd-matrix thead th:nth-child(3) {
  color: var(--orange);
}

.page-products .pd-matrix tbody th {
  font-weight: 500;
  color: var(--paper);
}

.page-products .pd-matrix tbody td {
  color: var(--text);
}

.page-products .pd-matrix tbody tr {
  transition: background var(--t) var(--ease);
}

.page-products .pd-matrix tbody tr:hover {
  background: rgba(35, 211, 199, 0.08);
}

.page-products .pd-matrix tbody tr:hover th {
  color: var(--cyan);
}

.page-products .pd-matrix tbody tr:last-child th,
.page-products .pd-matrix tbody tr:last-child td {
  border-bottom: 0;
}

.page-products .pd-desktop {
  background: linear-gradient(180deg, rgba(11, 27, 43, 1), rgba(11, 27, 43, 0.86));
}

.page-products .pd-desktop__grid {
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}

.page-products .pd-panel {
  padding: 18px;
  border: 1px solid rgba(35, 211, 199, 0.32);
  border-radius: var(--r-md);
  background: linear-gradient(160deg, rgba(19, 42, 61, 0.96), rgba(6, 19, 30, 0.92));
}

.page-products .pd-panel__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--mist);
}

.page-products .pd-panel__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 9px 0;
  font-family: var(--font-mono);
  font-size: 13px;
  border-top: 1px dashed rgba(174, 187, 199, 0.18);
}

.page-products .pd-panel__key {
  color: var(--mist);
}

.page-products .pd-panel__val {
  color: var(--cyan);
}

.page-products .pd-panel__val--orange {
  color: var(--orange);
}

.page-products .pd-panel__bar {
  height: 6px;
  margin: 14px 0 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(174, 187, 199, 0.18);
}

.page-products .pd-panel__bar span {
  display: block;
  width: 72%;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
}

.page-products .pd-points {
  display: grid;
  gap: 14px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .pd-points li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
}

.page-products .pd-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border: 1px solid var(--cyan);
  transform: rotate(45deg);
}

.page-products .pd-points strong {
  color: var(--paper);
}

.page-products .pd-web {
  background: var(--pale);
  color: var(--slate);
}

.page-products .pd-web h2,
.page-products .pd-web h3 {
  color: var(--ink);
}

.page-products .pd-web p {
  color: var(--slate);
}

.page-products .pd-web .eyebrow {
  color: var(--ink);
}

.page-products .pd-web .pd-sec-head p {
  color: var(--slate);
}

.page-products .pd-web .media {
  border-color: rgba(11, 27, 43, 0.16);
  background: rgba(255, 255, 255, 0.7);
}

.page-products .pd-web__grid {
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
}

.page-products .pd-weblist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .pd-weblist__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 13px;
  font-size: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(11, 27, 43, 0.14);
  border-radius: var(--r-sm);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}

.page-products .pd-weblist__item:hover {
  border-color: var(--cyan);
  transform: translateX(2px);
}

.page-products .pd-weblist__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--slate);
}

.page-products .pd-check {
  background:
    radial-gradient(80% 60% at 10% 0%, rgba(35, 211, 199, 0.1), transparent 60%),
    var(--ink);
}

.page-products .pd-check__list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .pd-check__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 15px 16px;
  border: 1px solid var(--pd-line);
  border-radius: var(--r-md);
  background: rgba(19, 42, 61, 0.55);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.page-products .pd-check__item:hover {
  border-color: rgba(35, 211, 199, 0.45);
}

.page-products .pd-check__item:has(input:checked) {
  border-color: rgba(35, 211, 199, 0.6);
  background: rgba(35, 211, 199, 0.1);
}

.page-products .pd-check__box {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  border: 1px solid var(--mist);
  border-radius: 4px;
  background: rgba(6, 19, 30, 0.72);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}

.page-products .pd-check__box:checked {
  background: var(--cyan);
  border-color: var(--cyan);
}

.page-products .pd-check__box:checked::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 4px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--deep);
  border-bottom: 2px solid var(--deep);
  transform: rotate(45deg);
}

.page-products .pd-check__box:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

.page-products .pd-check__text {
  cursor: pointer;
}

.page-products .pd-check__name {
  display: block;
  font-size: 15px;
  color: var(--paper);
}

.page-products .pd-check__hint {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mist);
}

.page-products .pd-check__foot {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--mist);
}

.page-products .pd-check__foot a {
  margin-left: 6px;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(35, 211, 199, 0.5);
}

.page-products .pd-version .pd-impact {
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid var(--pd-line);
  border-radius: var(--r-md);
  background: var(--pd-void);
}

.page-products .pd-version .pd-impact summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  font-size: 14px;
  color: var(--paper);
  cursor: pointer;
  list-style: none;
}

.page-products .pd-version .pd-impact summary::-webkit-details-marker {
  display: none;
}

.page-products .pd-version .pd-impact summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--cyan);
}

.page-products .pd-version .pd-impact[open] summary::after {
  content: "−";
}

.page-products .pd-impact__body {
  padding: 14px 18px 4px;
  border-top: 1px solid var(--pd-line);
}

.page-products .pd-impact__body p {
  font-size: 14px;
  color: var(--text);
}

.page-products .pd-timeline {
  display: grid;
  gap: 22px;
  margin: 20px 0 0;
  padding: 0 0 0 22px;
  list-style: none;
  border-left: 1px solid rgba(35, 211, 199, 0.35);
}

.page-products .pd-timeline__item {
  position: relative;
}

.page-products .pd-timeline__item::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(35, 211, 199, 0.16);
}

.page-products .pd-timeline__when {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--orange);
}

.page-products .pd-timeline__what {
  margin: 5px 0 0;
  font-size: 15px;
  color: var(--paper);
}

.page-products .pd-steps {
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
}

.page-products .pd-steps__list {
  display: grid;
  gap: 14px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .pd-steps__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--pd-line);
  border-radius: var(--r-md);
  background: rgba(19, 42, 61, 0.5);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}

.page-products .pd-steps__item:hover {
  border-color: rgba(122, 108, 255, 0.5);
  transform: translateX(2px);
}

.page-products .pd-steps__num {
  font-size: 18px;
  line-height: 1.3;
  color: var(--cyan);
}

.page-products .pd-steps__text {
  margin: 0;
  font-size: 15px;
  color: var(--text);
}

.page-products .pd-steps__text strong {
  color: var(--paper);
}

.page-products .pd-steps__note {
  margin-top: 18px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--mist);
  border-left: 2px solid var(--violet);
  background: rgba(122, 108, 255, 0.08);
}

.page-products .pd-help__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.page-products .pd-help__card {
  padding: 18px;
  border-top: 2px solid var(--cyan);
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: rgba(19, 42, 61, 0.6);
}

.page-products .pd-help__card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.page-products .pd-help__card p {
  font-size: 14px;
  color: var(--mist);
}

.page-products .pd-help__link {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(35, 211, 199, 0.45);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.page-products .pd-help__link:hover {
  color: var(--violet);
  border-bottom-color: var(--violet);
}

.page-products .pd-help__foot {
  margin-top: 22px;
  font-size: 13px;
  color: var(--mist);
}

@media (min-width: 600px) {
  .page-products .pd-weblist {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .pd-help__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  .page-products .pd-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-products .pd-picks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-products .pd-weblist {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-products .pd-help__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .page-products .pd-hero__media {
    margin-top: 26px;
  }
}

@media (min-width: 1000px) {
  .page-products .pd-console {
    grid-template-columns: 236px minmax(0, 1fr);
    align-items: start;
  }

  .page-products .pd-rail {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
}

@media (max-width: 599px) {
  .page-products .pd-matrix table {
    font-size: 12.5px;
  }

  .page-products .pd-matrix th,
  .page-products .pd-matrix td {
    padding: 9px 8px;
  }

  .page-products .pd-matrix tbody th {
    width: 32%;
  }

  .page-products .pd-hero__actions .btn {
    flex: 1 1 auto;
    text-align: center;
  }
}