@layer legacy {
/* 存证总览承载数据文件粒子动画，统计与导航保持可选取的真实文本。 */
.archive-page #app { background: var(--bg); }
.archive-page main { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
/* 标题与舞台保持独立间距，避免沿用首页的负边距覆盖标题。 */
.onchain-archive .art-experience { margin-inline: calc(-1 * var(--page-gutter)); }
.onchain-archive .art-stage { margin-top: 0; }
.archive-brandline { margin: 4px 0 12px; text-align: center; color: var(--muted);
  font-size: 6px; letter-spacing: 3px; }
.archive-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.archive-heading h1 { flex-shrink: 0; font: 400 24px/1.3 Georgia, 'Songti TC', serif; }
.archive-heading > span { flex: 1; border-top: 1px solid var(--border); padding-top: 7px;
  text-align: right; font-size: 7px; letter-spacing: 2px; color: var(--muted); }
.archive-total-label { font: 14px/1.6 Georgia, 'Songti TC', serif; }
.archive-total-label small { font: 10px sans-serif; color: var(--muted); margin-left: 8px; }
.archive-statistics { display: flex; align-items: center; gap: 14px; margin-top: 5px; }
.archive-statistics > strong { font: 400 clamp(45px, 14vw, 62px)/1.1 Georgia, serif;
  letter-spacing: -3px; color: var(--text); }
.archive-statistics > div { flex: 1; min-width: 0; border-left: 1px solid var(--border); padding-left: 14px; }
.archive-statistics span { display: block; font-size: 11px; color: var(--muted); }
.archive-statistics b { display: block; margin-top: 5px; font: 400 25px Georgia, serif; color: var(--accent-hover); }
/* 立体轨道独立于圆盘图层，绕 Y 轴公转后翻转牌面，使每块标牌始终面向圆心。 */
.archive-orbit { position: relative; width: calc(100% + 48px);
  aspect-ratio: 390 / 290; margin: 8px -24px 0; container-type: inline-size;
  --orbit-center-y: 43%; --orbit-radius: 43cqw; }
.archive-orbit-art { position: absolute; inset: 0; isolation: isolate; }
.archive-disc { position: absolute; inset: 5%; z-index: 1;
  width: 90%; height: 90%; object-fit: contain; pointer-events: none; }
/* 正交投影保持真实旋转轴与石球重合；三维朝向和实体厚边由子图层保留。 */
.archive-orbit-scene { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.archive-orbit-plane { position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(-40deg); transform-origin: 50% var(--orbit-center-y); }
.archive-orbit-icon { position: absolute; top: var(--orbit-center-y); left: 50%; width: 16%; aspect-ratio: 1;
  transform-style: preserve-3d;
  animation: archive-orbit-travel 5s linear infinite;
  animation-delay: var(--orbit-delay); }
.archive-plaque-volume { position: absolute; inset: 0; transform-style: preserve-3d;
  transform: translate(var(--plaque-pivot-x), var(--plaque-pivot-y)); }
.archive-orbit-plaque { position: absolute; inset: 0;
  background: url('../assets/provenance/archive-original-icons.png') no-repeat;
  background-size: 300% 200%; background-position: var(--sprite-x) var(--sprite-y); }
/* 按透明纹理轮廓逐层挤出，厚边随牌面真实转动，正反面各自封口。 */
.archive-orbit-plaque--edge { transform: translateZ(calc(var(--plaque-layer) * .2cqw));
  filter: brightness(.68) saturate(1.15); backface-visibility: visible; }
.archive-orbit-plaque--front { transform: translateZ(.8cqw); backface-visibility: hidden; }
/* 素材本身带有倾斜轮廓；翻面后抵消 X 轴镜像，保证背面与前面、侧边共用同一轮廓。 */
.archive-orbit-plaque--back { transform: translateZ(-.8cqw) rotateY(180deg) scaleX(-1);
  backface-visibility: hidden; }
/* 四个侧面连接纹理中的倾斜标牌轮廓，侧视时显示连续金属表面而非多条薄线。 */
.archive-plaque-side { position: absolute; left: var(--side-x); top: var(--side-y);
  width: var(--side-length); height: 1.6cqw; background-color: var(--accent);
  background-image: url('../assets/provenance/archive-original-icons.png');
  background-size: 1200% 800%; background-position: 5% 3%;
  box-shadow: inset 0 0 0 .4px var(--accent-hover); backface-visibility: visible;
  transform-origin: left top;
  transform: translateZ(.8cqw) rotateZ(var(--side-angle)) rotateX(-90deg); }
.archive-orbit[data-paused="true"] .archive-orbit-icon { animation-play-state: paused; }
@keyframes archive-orbit-travel {
  from { transform: translate(-50%, -50%) rotateY(0deg) translateZ(var(--orbit-radius)) rotateY(180deg); }
  to { transform: translate(-50%, -50%) rotateY(360deg) translateZ(var(--orbit-radius)) rotateY(180deg); }
}
.archive-categories { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.archive-categories > div { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 6px;
  align-items: center; padding: 12px 8px 12px 0; border-bottom: 1px solid var(--soft-line); }
.archive-categories > div:nth-child(even) { border-left: 1px solid var(--soft-line); padding-left: 13px; }
.archive-categories .icon { color: var(--accent-hover); width: 20px !important; height: 20px !important; }
.archive-categories dt { font: 12px/1.4 Georgia, 'Songti TC', serif; }
.archive-categories dt small { display: block; color: var(--muted); font: 6px/1.5 sans-serif;
  letter-spacing: 1px; margin-top: 3px; }
.archive-categories dd { margin: 0; font: 18px/1.2 Georgia, serif; color: var(--text); }
.archive-browse { display: flex; align-items: center; justify-content: space-between; gap: 15px;
  margin-top: 20px; border-radius: 99px; padding: 15px 24px; min-height: 52px;
  background: var(--text); color: var(--on-accent); font: 20px/1.3 Georgia, 'Songti TC', serif; }
.archive-browse:hover { background: var(--accent-hover); }
.archive-caption { text-align: center; color: var(--muted); font-size: 9px; margin-top: 13px; }
@media (max-width: 360px) {
  .archive-statistics { gap: 10px; }
  .archive-statistics > strong { font-size: 44px; }
  .archive-statistics > div { padding-left: 10px; }
  .archive-statistics b { font-size: 22px; }
  .archive-categories > div { grid-template-columns: 20px 1fr; }
  .archive-categories .icon { grid-row: span 2; }
  .archive-categories dd { grid-column: 2; }
}

}