.page-privacy {
  background: var(--ink-900);
  color: var(--mist);
  font-family: var(--font-sans);
  padding-bottom: 64px;
}

.page-privacy a {
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-privacy a:hover,
.page-privacy a:focus-visible {
  border-bottom-color: var(--amber);
}

.page-privacy :focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.page-privacy .privacy-crumbs-wrap {
  padding-top: 20px;
  padding-bottom: 4px;
}

.page-privacy .ds-crumbs {
  font-size: 13px;
  color: var(--gray);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.page-privacy .ds-crumbs a {
  color: var(--gray);
}

.page-privacy .ds-crumbs a:hover {
  color: var(--amber);
}

.page-privacy .ds-crumbs__sep {
  color: var(--line);
}

/* ---------- hero ---------- */

.page-privacy .privacy-hero {
  background:
    radial-gradient(900px 420px at 88% -10%, rgba(240, 178, 74, .14), transparent 70%),
    linear-gradient(180deg, var(--ink-800), var(--ink-900));
  border-bottom: 1px solid var(--line);
  padding: 28px 0 44px;
}

.page-privacy .privacy-hero__inner {
  display: grid;
  gap: 28px;
  align-items: start;
}

.page-privacy .privacy-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--gray);
  margin: 0 0 16px;
  text-transform: uppercase;
}

.page-privacy .privacy-kicker__bar {
  width: 28px;
  height: 1px;
  background: var(--amber);
  display: inline-block;
}

.page-privacy h1 {
  font-size: clamp(30px, 7vw, 54px);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 18px;
  color: var(--mist);
}

.page-privacy .privacy-hero__desc {
  font-size: 16px;
  line-height: 1.8;
  color: var(--gray);
  max-width: 62ch;
  margin: 0 0 22px;
}

.page-privacy .privacy-hero__contact {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mist);
  background: rgba(23, 50, 74, .55);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.page-privacy .privacy-hero__contact .ds-dot {
  margin-top: 7px;
  flex: none;
}

.page-privacy .privacy-mail {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--amber);
  word-break: break-all;
}

/* ---------- legend ---------- */

.page-privacy .privacy-legend {
  background: rgba(245, 241, 232, .06);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  backdrop-filter: blur(12px);
}

.page-privacy .privacy-legend__title {
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--gray);
  margin: 0 0 14px;
}

.page-privacy .privacy-legend__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-privacy .privacy-legend__item {
  display: grid;
  grid-template-columns: 14px 1fr;
  grid-template-areas:
    "chip name"
    "chip note";
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(42, 74, 99, .8);
}

.page-privacy .privacy-legend__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-privacy .privacy-legend__item .privacy-chip {
  grid-area: chip;
}

.page-privacy .privacy-legend__name {
  grid-area: name;
  font-size: 15px;
  font-weight: 700;
  color: var(--mist);
}

.page-privacy .privacy-legend__note {
  grid-area: note;
  font-size: 13px;
  color: var(--gray);
}

.page-privacy .privacy-chip {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  display: inline-block;
  flex: none;
  background: var(--gray);
}

.page-privacy .privacy-chip--amber { background: var(--amber); }
.page-privacy .privacy-chip--orange { background: var(--orange); }
.page-privacy .privacy-chip--jade { background: var(--jade); }

.page-privacy .privacy-legend__item--amber .privacy-chip { background: var(--amber); }
.page-privacy .privacy-legend__item--orange .privacy-chip { background: var(--orange); }
.page-privacy .privacy-legend__item--jade .privacy-chip { background: var(--jade); }

/* ---------- layout ---------- */

.page-privacy .privacy-layout {
  display: grid;
  gap: 32px;
  padding-top: 40px;
}

.page-privacy .privacy-main {
  min-width: 0;
}

/* ---------- sections ---------- */

.page-privacy .privacy-sec {
  padding: 28px 0 32px;
  border-bottom: 1px solid var(--line);
}

.page-privacy .privacy-sec__head {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 14px;
}

.page-privacy .privacy-sec__idx {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--amber);
  border: 1px solid rgba(240, 178, 74, .45);
  border-radius: var(--radius);
  padding: 2px 7px;
  line-height: 1.4;
  flex: none;
}

.page-privacy .privacy-sec__title {
  font-size: clamp(21px, 3.4vw, 30px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--mist);
}

.page-privacy .privacy-sec__lede {
  font-size: 15px;
  line-height: 1.8;
  color: var(--gray);
  margin: 0 0 20px;
  max-width: 68ch;
}

.page-privacy .privacy-note {
  font-size: 14px;
  line-height: 1.8;
  color: var(--gray);
  margin: 18px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--line);
}

/* ---------- tables ---------- */

.page-privacy .privacy-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-800);
}

.page-privacy .privacy-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.7;
}

.page-privacy .privacy-table th,
.page-privacy .privacy-table td {
  text-align: left;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.page-privacy .privacy-table thead th {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--gray);
  font-weight: 500;
  background: rgba(15, 36, 56, .9);
  white-space: nowrap;
}

.page-privacy .privacy-table tbody th {
  color: var(--mist);
  font-weight: 700;
  white-space: nowrap;
}

.page-privacy .privacy-table tbody td {
  color: var(--gray);
}

.page-privacy .privacy-table tbody th .privacy-chip {
  margin-right: 8px;
  vertical-align: 1px;
}

.page-privacy .privacy-table tbody tr:last-child th,
.page-privacy .privacy-table tbody tr:last-child td {
  border-bottom: 0;
}

.page-privacy .privacy-table tbody tr {
  transition: background var(--dur) var(--ease);
}

.page-privacy .privacy-table tbody tr:hover,
.page-privacy .privacy-table tbody tr:focus-within {
  background: var(--amber-soft);
}

.page-privacy .privacy-table tbody tr:hover th:first-child {
  box-shadow: inset 3px 0 0 var(--amber);
}

.page-privacy .privacy-table tbody tr:hover td:nth-child(2) {
  background: rgba(240, 178, 74, .06);
  color: var(--mist);
}

/* ---------- figure ---------- */

.page-privacy .privacy-figure {
  margin: 0 0 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-700);
}

.page-privacy .privacy-figure .media-frame__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  aspect-ratio: 10 / 7;
}

.page-privacy .privacy-figure .media-frame__cap {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--gray);
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: var(--ink-800);
}

/* ---------- uses ---------- */

.page-privacy .privacy-uses {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-privacy .privacy-uses__item {
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 16px 18px;
}

.page-privacy .privacy-uses__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--mist);
  margin: 0 0 8px;
  line-height: 1.45;
}

.page-privacy .privacy-uses__item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--gray);
}

/* ---------- callout ---------- */

.page-privacy .privacy-callout {
  margin-top: 22px;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink-900);
  border-left: 3px solid var(--orange);
}

.page-privacy .privacy-callout--ghost {
  background: rgba(245, 241, 232, .06);
  color: var(--mist);
  border: 1px solid var(--line);
  border-left: 3px solid var(--jade);
}

.page-privacy .privacy-callout__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.45;
  color: inherit;
}

.page-privacy .privacy-callout p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: inherit;
}

.page-privacy .privacy-callout a {
  color: inherit;
  border-bottom: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 13px;
  word-break: break-all;
}

.page-privacy .privacy-callout--ghost a {
  color: var(--amber);
  font-family: var(--font-sans);
  font-size: 14.5px;
}

/* ---------- two boxes ---------- */

.page-privacy .privacy-grid-two {
  display: grid;
  gap: 14px;
  margin-top: 4px;
}

.page-privacy .privacy-box {
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-top: 2px solid var(--amber);
  border-radius: var(--radius);
  padding: 16px;
}

.page-privacy .privacy-box__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--mist);
  line-height: 1.45;
}

.page-privacy .privacy-box p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--gray);
}

/* ---------- steps ---------- */

.page-privacy .privacy-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  counter-reset: privacy-step;
}

.page-privacy .privacy-steps li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  align-items: start;
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.page-privacy .privacy-steps__num {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--orange);
  border: 1px solid rgba(255, 107, 61, .5);
  border-radius: var(--radius);
  text-align: center;
  padding: 4px 0;
  line-height: 1.3;
}

.page-privacy .privacy-steps__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--mist);
  line-height: 1.45;
}

.page-privacy .privacy-steps li p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--gray);
}

/* ---------- verdict ---------- */

.page-privacy .privacy-verdict {
  margin-top: 32px;
  background: var(--paper);
  color: var(--ink-900);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: space-between;
}

.page-privacy .privacy-verdict .verdict-band__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  font-weight: 700;
  color: var(--ink-900);
}

.page-privacy .privacy-verdict .verdict-band__link {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-900);
  border-bottom: 2px solid var(--orange);
  white-space: nowrap;
}

/* ---------- sticky brief ---------- */

.page-privacy .privacy-brief {
  background: rgba(23, 50, 74, .78);
  border: 1px solid var(--line);
  border-top: 2px solid var(--amber);
  border-radius: var(--radius);
  padding: 18px;
  backdrop-filter: blur(12px);
  align-self: start;
}

.page-privacy .privacy-brief__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--gray);
  margin: 0 0 6px;
}

.page-privacy .privacy-brief__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--mist);
}

.page-privacy .privacy-brief__list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-privacy .privacy-brief__list a {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mist);
  padding: 7px 0 7px 12px;
  border-left: 2px solid var(--line);
  border-bottom: 0;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.page-privacy .privacy-brief__list a:hover,
.page-privacy .privacy-brief__list a:focus-visible {
  border-left-color: var(--amber);
  color: var(--amber);
  background: var(--amber-soft);
}

.page-privacy .privacy-brief__facts {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.page-privacy .privacy-brief__fact {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gray);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.page-privacy .privacy-brief__fact .ds-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.page-privacy .privacy-brief__btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  border-bottom: 1px solid var(--line);
}

/* ---------- responsive ---------- */

@media (min-width: 760px) {
  .page-privacy .privacy-hero {
    padding: 40px 0 56px;
  }

  .page-privacy .privacy-hero__inner {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
  }

  .page-privacy .privacy-uses {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-privacy .privacy-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .page-privacy .privacy-sec {
    padding: 36px 0 40px;
  }
}

@media (min-width: 1040px) {
  .page-privacy .privacy-layout {
    grid-template-columns: minmax(0, 1fr) 292px;
    gap: 48px;
    padding-top: 48px;
  }

  .page-privacy .privacy-brief {
    position: sticky;
    top: 84px;
  }
}

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


<main id="main-content" class="page-privacy">
  <div class="ds-container privacy-crumbs-wrap">
    <nav class="ds-crumbs" aria-label="页面位置">
      <a href="/">首页</a>
      <span class="ds-crumbs__sep" aria-hidden="true">/</span>
      <a href="/statement/">使用说明</a>
      <span class="ds-crumbs__sep" aria-hidden="true">/</span>
      <span aria-current="page">个人信息说明</span>
    </nav>
  </div>

  <header class="privacy-hero">
    <div class="ds-container privacy-hero__inner">
      <div class="privacy-hero__lead">
        <p class="privacy-kicker">
          <span class="ds-mono">PERSONAL DATA</span>
          <span class="privacy-kicker__bar" aria-hidden="true"></span>
          <span>随 v2.6 阶段同步更新</span>
        </p>
        <h1>留下的每一条信息，都写清楚用在哪里</h1>
        <p class="privacy-hero__desc">
          在大神娱乐中心查一次对照表，或者发一封咨询邮件，都会留下少量信息。下面把访问统计、咨询邮件、排查沟通这三类场景分开列出来，写明记录了什么、给谁用、留多久、要删怎么删。看完再提交，心里有底。
        </p>
        <div class="privacy-hero__contact">
          <span class="ds-dot ds-dot--ok" aria-hidden="true"></span>
          <span>信息请求邮箱 <a class="privacy-mail ds-mono" href="mailto:contact@new-dashen.com.cn">contact@new-dashen.com.cn</a>，工作日 9:00–18:00 接收，平均 4 小时内首次回复。</span>
        </div>
      </div>
      <aside class="privacy-legend" aria-label="三类信息场景的颜色标记">
        <p class="privacy-legend__title">三类场景，一眼分开</p>
        <ul class="privacy-legend__list">
          <li class="privacy-legend__item privacy-legend__item--amber">
            <span class="privacy-chip" aria-hidden="true"></span>
            <span class="privacy-legend__name">访问统计</span>
            <span class="privacy-legend__note">打开页面时自动生成</span>
          </li>
          <li class="privacy-legend__item privacy-legend__item--orange">
            <span class="privacy-chip" aria-hidden="true"></span>
            <span class="privacy-legend__name">咨询邮件</span>
            <span class="privacy-legend__note">你按下发送之后才有</span>
          </li>
          <li class="privacy-legend__item privacy-legend__item--jade">
            <span class="privacy-chip" aria-hidden="true"></span>
            <span class="privacy-legend__name">排查沟通</span>
            <span class="privacy-legend__note">按步骤反馈时补充</span>
          </li>
        </ul>
      </aside>
    </div>
  </header>

  <div class="ds-container privacy-layout">
    <div class="privacy-main">

      <section class="privacy-sec" id="sec-collect" aria-labelledby="sec-collect-title">
        <div class="privacy-sec__head">
          <span class="privacy-sec__idx ds-mono">01</span>
          <h2 class="privacy-sec__title" id="sec-collect-title">三类场景分别记下什么</h2>
        </div>
        <p class="privacy-sec__lede">
          字段名按你平时说话的方式写，不绕弯。凡是表格里没有的，就是没有被记下来。
        </p>
        <div class="privacy-table-wrap">
          <table class="data-table privacy-table">
            <thead>
              <tr>
                <th scope="col">场景</th>
                <th scope="col">记录的具体内容</th>
                <th scope="col">什么时候产生</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row"><span class="privacy-chip privacy-chip--amber" aria-hidden="true"></span>访问统计</th>
                <td>打开的页面地址、停留时长、从哪个页面跳转而来、设备类型与浏览器版本、所在城市（只到城市一级）</td>
                <td>你打开页面时自动生成，无需填写任何内容</td>
              </tr>
              <tr>
                <th scope="row"><span class="privacy-chip privacy-chip--orange" aria-hidden="true"></span>咨询邮件</th>
                <td>邮件正文、你附上的截图、发件邮箱、发送时间，以及你写在落款里的联系方式</td>
                <td>你把邮件发到客服邮箱之后</td>
              </tr>
              <tr>
                <th scope="row"><span class="privacy-chip privacy-chip--jade" aria-hidden="true"></span>排查沟通</th>
                <td>设备型号、系统版本、浏览器名称与版本、你看到的入口版本号、提示文字或截图</td>
                <td>你按步骤排查并把结果反馈给我们时</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>

      <section class="privacy-sec" id="sec-use" aria-labelledby="sec-use-title">
        <div class="privacy-sec__head">
          <span class="privacy-sec__idx ds-mono">02</span>
          <h2 class="privacy-sec__title" id="sec-use-title">每一类信息落到哪件事上</h2>
        </div>
        <figure class="media-frame privacy-figure">
          <img class="media-frame__img"
               src="{zhanqunpic:h:700w:1000}"
               width="1000" height="700"
               alt="抽象数据流向信息图，三个入口方块汇入一个中心方框，箭头为单向，无人物与文字细节"
               loading="lazy" decoding="async">
          <figcaption class="media-frame__cap">三类信息各自进入对应的处理环节，不会跨到别的地方。</figcaption>
        </figure>
        <ul class="privacy-uses">
          <li class="privacy-uses__item">
            <h3 class="privacy-uses__title">访问统计 → 调整对照表</h3>
            <p>看哪几行差异被反复打开、哪一列总被划走，就知道表格哪一段该写得再直白些。统计结果只以汇总数字出现。</p>
          </li>
          <li class="privacy-uses__item">
            <h3 class="privacy-uses__title">咨询邮件 → 回复到你的邮箱</h3>
            <p>你的问题、截图和落款只用于回信与后续追问。高频问题的结论会写进<a href="/answers/">答疑中心的自查清单</a>，写进去时去掉邮箱与任何能认出你的细节。</p>
          </li>
          <li class="privacy-uses__item">
            <h3 class="privacy-uses__title">排查沟通 → 复现你那台设备</h3>
            <p>机型、系统版本和浏览器版本凑齐了，客服才能在自己的机器上还原同一屏提示，直接告诉你下一步点哪里。</p>
          </li>
        </ul>
        <p class="privacy-note">
          这三类信息各走各的路径：统计不进邮箱，邮件不进统计报表，排查记录只跟着当次咨询走。
        </p>
      </section>

      <section class="privacy-sec" id="sec-retain" aria-labelledby="sec-retain-title">
        <div class="privacy-sec__head">
          <span class="privacy-sec__idx ds-mono">03</span>
          <h2 class="privacy-sec__title" id="sec-retain-title">留多久，到期怎么处理</h2>
        </div>
        <p class="privacy-sec__lede">
          每类信息都有明确的到期点，到点按表处理，不需要你额外提醒。
        </p>
        <div class="privacy-table-wrap">
          <table class="data-table privacy-table">
            <thead>
              <tr>
                <th scope="col">信息类别</th>
                <th scope="col">保存期限</th>
                <th scope="col">到期后的处理</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row"><span class="privacy-chip privacy-chip--amber" aria-hidden="true"></span>访问统计</th>
                <td>滚动保留 90 天</td>
                <td>到期只留下不含单条记录的数量汇总</td>
              </tr>
              <tr>
                <th scope="row"><span class="privacy-chip privacy-chip--orange" aria-hidden="true"></span>咨询邮件</th>
                <td>咨询处理完成后 12 个月</td>
                <td>到期删除邮件正文与附件截图</td>
              </tr>
              <tr>
                <th scope="row"><span class="privacy-chip privacy-chip--jade" aria-hidden="true"></span>排查沟通</th>
                <td>排查确认通过后 6 个月</td>
                <td>到期删除设备记录与截图</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="privacy-callout">
          <h3 class="privacy-callout__title">想提前删除，一封邮件就够</h3>
          <p>
            不用等到期。发信到 <a class="privacy-mail ds-mono" href="mailto:contact@new-dashen.com.cn">contact@new-dashen.com.cn</a>，写清三件事：你发信时用的邮箱、要处理的是哪一类信息、大概的发送时间。我们按邮箱和时间找到对应记录，处理完给你回执。
          </p>
        </div>
      </section>

      <section class="privacy-sec" id="sec-storage" aria-labelledby="sec-storage-title">
        <div class="privacy-sec__head">
          <span class="privacy-sec__idx ds-mono">04</span>
          <h2 class="privacy-sec__title" id="sec-storage-title">统计方式与浏览器本地保存</h2>
        </div>
        <div class="privacy-grid-two">
          <article class="privacy-box">
            <h3 class="privacy-box__title">访问统计怎么做的</h3>
            <p>站点用自己维护的计数程序统计页面访问，只回答“哪一页被看了多少次”这类问题，不建立能对应到个人的访问画像，也不把统计结果交给外部机构。</p>
          </article>
          <article class="privacy-box">
            <h3 class="privacy-box__title">浏览器里存了什么</h3>
            <p>本地保存的只有两类偏好：你上次查看的版本对照视图，以及步骤卡展开到哪一步。它们留在你自己的浏览器里，用来下次打开时直接停在熟悉的位置。</p>
          </article>
        </div>
        <div class="privacy-callout privacy-callout--ghost">
          <h3 class="privacy-callout__title">自己清掉的办法</h3>
          <p>
            在浏览器设置里找到“清除浏览数据”或本站的站点数据项，勾选本地存储后清除即可，下一次打开会回到默认视图，其余功能照常使用。清除后如需重新确认当前入口，可以先回<a href="/">首页的入口对照表</a>看一行版本号。
          </p>
        </div>
      </section>

      <section class="privacy-sec" id="sec-request" aria-labelledby="sec-request-title">
        <div class="privacy-sec__head">
          <span class="privacy-sec__idx ds-mono">05</span>
          <h2 class="privacy-sec__title" id="sec-request-title">提出查询、更正或删除请求</h2>
        </div>
        <p class="privacy-sec__lede">
          一个邮箱受理全部信息请求，写法固定，方便你一次说清、我们一次办完。
        </p>
        <ol class="privacy-steps">
          <li>
            <span class="privacy-steps__num ds-mono">01</span>
            <div>
              <h3 class="privacy-steps__title">邮件标题写“信息请求”</h3>
              <p>写这四个字，邮件会被优先归到信息请求队列，不会混在排查咨询里排队。</p>
            </div>
          </li>
          <li>
            <span class="privacy-steps__num ds-mono">02</span>
            <div>
              <h3 class="privacy-steps__title">正文写清邮箱与时间</h3>
              <p>写上你当时使用的邮箱、大概的日期，以及要办的是查询、更正还是删除。有截图可以一并附上。</p>
            </div>
          </li>
          <li>
            <span class="privacy-steps__num ds-mono">03</span>
            <div>
              <h3 class="privacy-steps__title">等回执，五个工作日内</h3>
              <p>收到请求后 5 个工作日内回复处理结果；需要你补一句说明的，会在同一封回信里写明补什么。</p>
            </div>
          </li>
        </ol>
        <p class="privacy-note">
          如果你是先来问入口或登录问题的，直接走<a href="/inquiry/">咨询通道</a>更快，那里列了提交排查所需的设备信息；操作中该留意的事项写在<a href="/statement/">使用说明</a>里。
        </p>
      </section>

      <div class="verdict-band privacy-verdict">
        <p class="verdict-band__text">提交之前扫一眼这三行，你就知道哪条信息会被留下、留多久。</p>
        <a class="verdict-band__link" href="/inquiry/">去咨询通道</a>
      </div>
    </div>

    <aside class="privacy-brief" aria-label="本页要点摘要">
      <p class="privacy-brief__label ds-mono">SUMMARY</p>
      <h2 class="privacy-brief__title">要点速览</h2>
      <ul class="privacy-brief__list">
        <li><a href="#sec-collect">三类场景记录什么</a></li>
        <li><a href="#sec-use">信息用在哪些环节</a></li>
        <li><a href="#sec-retain">保存期限与删除</a></li>
        <li><a href="#sec-storage">统计与本地存储</a></li>
        <li><a href="#sec-request">提出信息请求</a></li>
      </ul>
      <div class="privacy-brief__facts">
        <p class="privacy-brief__fact"><span class="ds-mono">90 天</span> 访问统计滚动保留</p>
        <p class="privacy-brief__fact"><span class="ds-mono">12 个月</span> 咨询邮件保存上限</p>
        <p class="privacy-brief__fact"><span class="ds-mono">5 个工作日</span> 处理结果回复</p>
      </div>
      <a class="ds-btn ds-btn--ghost ds-btn--sm privacy-brief__btn" href="/inquiry/">提交排查信息</a>
    </aside>
  </div>
</main>

.page-privacy {
  background: var(--ink-900);
  color: var(--mist);
  font-family: var(--font-sans);
  padding-bottom: 64px;
}

.page-privacy a {
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-privacy a:hover,
.page-privacy a:focus-visible {
  border-bottom-color: var(--amber);
}

.page-privacy :focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.page-privacy .privacy-crumbs-wrap {
  padding-top: 20px;
  padding-bottom: 4px;
}

.page-privacy .ds-crumbs {
  font-size: 13px;
  color: var(--gray);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.page-privacy .ds-crumbs a {
  color: var(--gray);
}

.page-privacy .ds-crumbs a:hover {
  color: var(--amber);
}

.page-privacy .ds-crumbs__sep {
  color: var(--line);
}

.page-privacy .privacy-hero {
  background:
    radial-gradient(900px 420px at 88% -10%, rgba(240, 178, 74, .14), transparent 70%),
    linear-gradient(180deg, var(--ink-800), var(--ink-900));
  border-bottom: 1px solid var(--line);
  padding: 28px 0 44px;
}

.page-privacy .privacy-hero__inner {
  display: grid;
  gap: 28px;
  align-items: start;
}

.page-privacy .privacy-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--gray);
  margin: 0 0 16px;
  text-transform: uppercase;
}

.page-privacy .privacy-kicker__bar {
  width: 28px;
  height: 1px;
  background: var(--amber);
  display: inline-block;
}

.page-privacy h1 {
  font-size: clamp(30px, 7vw, 54px);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 18px;
  color: var(--mist);
}

.page-privacy .privacy-hero__desc {
  font-size: 16px;
  line-height: 1.8;
  color: var(--gray);
  max-width: 62ch;
  margin: 0 0 22px;
}

.page-privacy .privacy-hero__contact {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mist);
  background: rgba(23, 50, 74, .55);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.page-privacy .privacy-hero__contact .ds-dot {
  margin-top: 7px;
  flex: none;
}

.page-privacy .privacy-mail {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--amber);
  word-break: break-all;
}

.page-privacy .privacy-legend {
  background: rgba(245, 241, 232, .06);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  backdrop-filter: blur(12px);
}

.page-privacy .privacy-legend__title {
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--gray);
  margin: 0 0 14px;
}

.page-privacy .privacy-legend__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-privacy .privacy-legend__item {
  display: grid;
  grid-template-columns: 14px 1fr;
  grid-template-areas:
    "chip name"
    "chip note";
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(42, 74, 99, .8);
}

.page-privacy .privacy-legend__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-privacy .privacy-legend__item .privacy-chip {
  grid-area: chip;
}

.page-privacy .privacy-legend__name {
  grid-area: name;
  font-size: 15px;
  font-weight: 700;
  color: var(--mist);
}

.page-privacy .privacy-legend__note {
  grid-area: note;
  font-size: 13px;
  color: var(--gray);
}

.page-privacy .privacy-chip {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  display: inline-block;
  flex: none;
  background: var(--gray);
}

.page-privacy .privacy-chip--amber { background: var(--amber); }
.page-privacy .privacy-chip--orange { background: var(--orange); }
.page-privacy .privacy-chip--jade { background: var(--jade); }

.page-privacy .privacy-legend__item--amber .privacy-chip { background: var(--amber); }
.page-privacy .privacy-legend__item--orange .privacy-chip { background: var(--orange); }
.page-privacy .privacy-legend__item--jade .privacy-chip { background: var(--jade); }

.page-privacy .privacy-layout {
  display: grid;
  gap: 32px;
  padding-top: 40px;
}

.page-privacy .privacy-main {
  min-width: 0;
}

.page-privacy .privacy-sec {
  padding: 28px 0 32px;
  border-bottom: 1px solid var(--line);
}

.page-privacy .privacy-sec__head {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 14px;
}

.page-privacy .privacy-sec__idx {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--amber);
  border: 1px solid rgba(240, 178, 74, .45);
  border-radius: var(--radius);
  padding: 2px 7px;
  line-height: 1.4;
  flex: none;
}

.page-privacy .privacy-sec__title {
  font-size: clamp(21px, 3.4vw, 30px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--mist);
}

.page-privacy .privacy-sec__lede {
  font-size: 15px;
  line-height: 1.8;
  color: var(--gray);
  margin: 0 0 20px;
  max-width: 68ch;
}

.page-privacy .privacy-note {
  font-size: 14px;
  line-height: 1.8;
  color: var(--gray);
  margin: 18px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--line);
}

.page-privacy .privacy-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-800);
}

.page-privacy .privacy-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.7;
}

.page-privacy .privacy-table th,
.page-privacy .privacy-table td {
  text-align: left;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.page-privacy .privacy-table thead th {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--gray);
  font-weight: 500;
  background: rgba(15, 36, 56, .9);
  white-space: nowrap;
}

.page-privacy .privacy-table tbody th {
  color: var(--mist);
  font-weight: 700;
  white-space: nowrap;
}

.page-privacy .privacy-table tbody td {
  color: var(--gray);
}

.page-privacy .privacy-table tbody th .privacy-chip {
  margin-right: 8px;
  vertical-align: 1px;
}

.page-privacy .privacy-table tbody tr:last-child th,
.page-privacy .privacy-table tbody tr:last-child td {
  border-bottom: 0;
}

.page-privacy .privacy-table tbody tr {
  transition: background var(--dur) var(--ease);
}

.page-privacy .privacy-table tbody tr:hover,
.page-privacy .privacy-table tbody tr:focus-within {
  background: var(--amber-soft);
}

.page-privacy .privacy-table tbody tr:hover th:first-child {
  box-shadow: inset 3px 0 0 var(--amber);
}

.page-privacy .privacy-table tbody tr:hover td:nth-child(2) {
  background: rgba(240, 178, 74, .06);
  color: var(--mist);
}

.page-privacy .privacy-figure {
  margin: 0 0 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-700);
}

.page-privacy .privacy-figure .media-frame__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  aspect-ratio: 10 / 7;
}

.page-privacy .privacy-figure .media-frame__cap {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--gray);
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: var(--ink-800);
}

.page-privacy .privacy-uses {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-privacy .privacy-uses__item {
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 16px 18px;
}

.page-privacy .privacy-uses__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--mist);
  margin: 0 0 8px;
  line-height: 1.45;
}

.page-privacy .privacy-uses__item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--gray);
}

.page-privacy .privacy-callout {
  margin-top: 22px;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink-900);
  border-left: 3px solid var(--orange);
}

.page-privacy .privacy-callout--ghost {
  background: rgba(245, 241, 232, .06);
  color: var(--mist);
  border: 1px solid var(--line);
  border-left: 3px solid var(--jade);
}

.page-privacy .privacy-callout__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.45;
  color: inherit;
}

.page-privacy .privacy-callout p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: inherit;
}

.page-privacy .privacy-callout a {
  color: inherit;
  border-bottom: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 13px;
  word-break: break-all;
}

.page-privacy .privacy-callout--ghost a {
  color: var(--amber);
  font-family: var(--font-sans);
  font-size: 14.5px;
}

.page-privacy .privacy-grid-two {
  display: grid;
  gap: 14px;
  margin-top: 4px;
}

.page-privacy .privacy-box {
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-top: 2px solid var(--amber);
  border-radius: var(--radius);
  padding: 16px;
}

.page-privacy .privacy-box__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--mist);
  line-height: 1.45;
}

.page-privacy .privacy-box p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--gray);
}

.page-privacy .privacy-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  counter-reset: privacy-step;
}

.page-privacy .privacy-steps li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  align-items: start;
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.page-privacy .privacy-steps__num {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--orange);
  border: 1px solid rgba(255, 107, 61, .5);
  border-radius: var(--radius);
  text-align: center;
  padding: 4px 0;
  line-height: 1.3;
}

.page-privacy .privacy-steps__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--mist);
  line-height: 1.45;
}

.page-privacy .privacy-steps li p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--gray);
}

.page-privacy .privacy-verdict {
  margin-top: 32px;
  background: var(--paper);
  color: var(--ink-900);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: space-between;
}

.page-privacy .privacy-verdict .verdict-band__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  font-weight: 700;
  color: var(--ink-900);
}

.page-privacy .privacy-verdict .verdict-band__link {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-900);
  border-bottom: 2px solid var(--orange);
  white-space: nowrap;
}

.page-privacy .privacy-brief {
  background: rgba(23, 50, 74, .78);
  border: 1px solid var(--line);
  border-top: 2px solid var(--amber);
  border-radius: var(--radius);
  padding: 18px;
  backdrop-filter: blur(12px);
  align-self: start;
}

.page-privacy .privacy-brief__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--gray);
  margin: 0 0 6px;
}

.page-privacy .privacy-brief__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--mist);
}

.page-privacy .privacy-brief__list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-privacy .privacy-brief__list a {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mist);
  padding: 7px 0 7px 12px;
  border-left: 2px solid var(--line);
  border-bottom: 0;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.page-privacy .privacy-brief__list a:hover,
.page-privacy .privacy-brief__list a:focus-visible {
  border-left-color: var(--amber);
  color: var(--amber);
  background: var(--amber-soft);
}

.page-privacy .privacy-brief__facts {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.page-privacy .privacy-brief__fact {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gray);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.page-privacy .privacy-brief__fact .ds-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.page-privacy .privacy-brief__btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 760px) {
  .page-privacy .privacy-hero {
    padding: 40px 0 56px;
  }

  .page-privacy .privacy-hero__inner {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
  }

  .page-privacy .privacy-uses {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-privacy .privacy-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .page-privacy .privacy-sec {
    padding: 36px 0 40px;
  }
}

@media (min-width: 1040px) {
  .page-privacy .privacy-layout {
    grid-template-columns: minmax(0, 1fr) 292px;
    gap: 48px;
    padding-top: 48px;
  }

  .page-privacy .privacy-brief {
    position: sticky;
    top: 84px;
  }
}

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