@layer legacy {
/* 艺术首页保留展厅布局，配色与全站黑金主题一致。 */
body.art-page { background: var(--bg); }
.art-page #app {
  color: var(--text); max-width: 430px; --page-gutter: 24px;
  background: url('../assets/home/gallery-reference.png') center top / 100% 680px no-repeat;
}
.art-header {
  height: 44px; min-height: 44px; padding: 12px 18px 0; border: 0;
  background: color-mix(in srgb, var(--bg) 93%, transparent); display: grid; grid-template-columns: 1fr auto 1fr;
}
.art-header .brand {
  font-family: Georgia, 'Times New Roman', serif; font-size: 21px; font-weight: 400;
  letter-spacing: .6px; text-align: center;
}
.art-header .menu-button { border: 0; background: none; width: 24px; height: 28px; }
.art-header .menu-bars, .art-header .menu-bars::before, .art-header .menu-bars::after {
  width: 22px; height: 1px; border-radius: 0;
}
.art-header .wallet-button {
  justify-self: end; gap: 5px; min-height: 28px; height: 28px; padding: 4px 10px;
  font-size: 9px; border-color: var(--border); color: var(--text); background: var(--surface);
}
.art-header .wallet-button > .icon:first-child { color: var(--accent-hover); }
.art-page main { padding-top: 0; }
.art-menu-settings { border-top: 1px solid var(--line); padding-top: 6px; }
.art-menu-settings > button { display: block; width: 100%; text-align: left; border: 0; color: var(--text); background: none; }
.art-home { padding-bottom: 19px; }
.art-heading { position: relative; z-index: 1; pointer-events: none; }
.art-eyebrow { text-align: center; font-size: 6px; line-height: 12px; letter-spacing: 3.5px; color: var(--muted); }
.art-heading h1 {
  margin-top: 14px; font-family: Georgia, 'Noto Serif CJK TC', 'Songti TC', 'PMingLiU', serif;
  font-size: clamp(27px, 9.1vw, 38px); line-height: 1.18; font-weight: 600; letter-spacing: -.8px;
}
.art-subtitle { margin-top: 9px; font-size: 7px; letter-spacing: 2.4px; line-height: 1.8; color: var(--muted); }
.art-experience { margin-inline: -24px; }
.art-stage {
  position: relative; aspect-ratio: 390 / 232.5; overflow: hidden; margin-top: -35px;

}
.art-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.art-stage.is-ready .art-canvas { opacity: 1; }
/* 整个舞台高度减半；回退素材与画布中的立体文件组保持相同位置。 */
.art-fallback { position: absolute; left: 11.795%; top: 9.462%; width: 42.564%; height: 71.398%; object-fit: contain; }
.art-stage.is-ready .art-fallback { visibility: hidden; }
.art-annotation { position: absolute; pointer-events: none; }
.art-annotation span { font-size: 9px; color: var(--text); display: block; white-space: nowrap; }
.art-annotation small { display: block; font-size: 6px; letter-spacing: 1.5px; line-height: 1.6; color: var(--muted); margin-top: 3px; }
.art-annotation-scan { top: 7.2%; left: 66.5%; }
.art-annotation-print { top: 34.6%; left: 78.7%; }
.art-annotation-chain { top: 82.6%; left: 8%; }
/* 隐藏步骤进度指示但保留原有占位，确保动画下方的内容位置不变。 */
.art-playback { visibility: hidden; display: flex; align-items: flex-start; gap: 12px; margin: 4px 24px 0; }
.art-steps { list-style: none; display: flex; justify-content: space-between; flex: 1; padding: 0; margin: 0; }
.art-steps li { display: flex; flex: 1; position: relative; flex-direction: column; align-items: center; gap: 3px; }
.art-steps li:not(:last-child)::after { content: ''; height: 1px; background: var(--border); position: absolute; top: 8px; left: calc(50% + 12px); width: calc(100% - 24px); }
.art-steps b { width: 17px; height: 17px; border: 1px solid var(--border); border-radius: 50%; font-weight: 400; font-size: 7px; text-align: center; line-height: 15px; color: var(--muted); }
.art-steps li.is-active b { color: var(--accent-hover); border-color: var(--accent); box-shadow: 0 0 9px color-mix(in srgb, var(--accent) 20%, transparent); }
.art-steps span { font-size: 10px; color: var(--text); }
.art-steps small { font-size: 5px; letter-spacing: 1.3px; color: var(--muted); }
.art-status, .art-value > .art-footnote {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.art-value { text-align: center; margin-top: 24px; }
.art-value h2 { font-family: Georgia, 'Noto Serif CJK TC', 'Songti TC', serif; font-weight: 400; font-size: 15px; line-height: 1.65; white-space: nowrap; }
.art-value > p { font-size: 10px; line-height: 1.75; color: var(--muted); margin: 12px auto 0; max-width: 330px; }
.art-cta { display: flex; align-items: center; justify-content: center; position: relative; gap: 12px; margin-top: 18px; padding: 11px 25px; min-height: 48px; background: var(--accent); color: var(--on-accent); border-radius: 99px; font-family: Georgia, 'Noto Serif CJK TC', 'Songti TC', serif; font-size: 20px; }
.art-cta .icon { position: absolute; right: 24px; }
.art-cta:hover { background: var(--accent-hover); }
.material-switcher { display: flex; gap: 8px; overflow-x: auto; padding: 3px 2px 14px; }
.material-switcher a { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 9px; font-size: 12px; }
.material-switcher small { color: var(--muted); font-size: 10px; }
.material-switcher [aria-current] { background: var(--selected-surface); color: var(--accent-dark); }
.material-preview { padding-top: 20px; padding-bottom: 35px; }
html:not([lang="zh-Hant"]) .art-value h2 { white-space: normal; }
html:not([lang="zh-Hant"]) .art-annotation span { white-space: normal; line-height: 1.4; }
html:not([lang="zh-Hant"]) .art-annotation { max-width: 19%; }
html:not([lang="zh-Hant"]) .art-annotation-chain { left: 8%; }
@media (max-width: 360px) {
  .art-page #app { --page-gutter: 18px; }
  .art-header { padding-inline: 14px; }
  .art-header .brand { font-size: 18px; }
  .art-header .wallet-button { padding: 4px 7px; font-size: 8px; }
  .art-experience { margin-inline: -18px; }
  .art-heading h1 { font-size: 27px; }
  .art-value h2 { font-size: 13px; }
  .art-annotation span { font-size: 8px; }
  .art-annotation small { font-size: 5px; letter-spacing: 1px; }
}

}