/* atlas · demo mode — rules only apply under html.atlas-demo (set by /ink/mode.js) */
html.atlas-demo #keyBtn, html.atlas-demo #rKey, html.atlas-demo #meLogin, html.atlas-demo #meLogout,
html.atlas-demo #loginCard, html.atlas-demo .pmsgform, html.atlas-demo .gbform,
html.atlas-demo .endbtns .eb2.msg { display: none !important; }
html.atlas-demo #pLike { cursor: default; }

/* lightbox: say what these pictures are */
html.atlas-demo #lb::after { content: '示意插画 · 非实拍'; position: absolute; left: 16px; top: calc(16px + env(safe-area-inset-top, 0px));
  z-index: 3; padding: 3px 10px; border-radius: 12px; font-size: 12.5px; letter-spacing: .5px; color: #FBF5E8;
  background: rgba(38,39,31,.55); pointer-events: none; }

/* red seal: tap to read what the demo is */
.demo-seal { position: fixed; z-index: 7; top: 74px; right: 23px; width: 40px; height: 44px; padding: 0;
  border: 2.2px solid #C23A2B; border-radius: 6px 5px 7px 5px; background: rgba(251,245,232,.88); color: #C23A2B;
  font-family: var(--serif, 'LXGW WenKai', serif); font-weight: 700; font-size: 14px; letter-spacing: 2px; line-height: 1;
  writing-mode: vertical-rl; display: flex; align-items: center; justify-content: center;
  transform: rotate(-7deg); box-shadow: inset 0 0 0 2px rgba(194,58,43,.12); cursor: pointer; }
.demo-seal:hover { transform: rotate(-7deg) scale(1.06); }
@media (max-width: 720px) {
  .demo-seal { top: calc(62px + env(safe-area-inset-top, 0px)); right: 10px; width: 34px; height: 40px; font-size: 12.5px; }
}

.demo-about { margin: 0 0 12px; padding: 10px 12px; border: 1.4px dashed #C23A2B; border-radius: 12px;
  background: rgba(194,58,43,.05); font-size: 13.5px; line-height: 1.7; }
.demo-about b { color: #C23A2B; letter-spacing: 1px; }
.demo-about p { margin: 4px 0 6px; }
.demo-credits { font-size: 12px; color: var(--dim, #57564A); }
.demo-credits ul { margin: 4px 0 0; padding-left: 18px; }
.demo-credits a { color: inherit; text-decoration: underline; }