/* Real finished artworks, shared by the home cards and project pages. */
.tool-art.demo-art, .project-hero .tool-visual.demo-art {
  position: relative; display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 26px 24px 45px; background: #e9e9e0;
}
.tool-art.demo-art { height: clamp(350px, 34vw, 450px); }
.demo-art.red-art, .demo-art.visual-red { background: #dfe5d8; }
.demo-art.poem-artwork, .demo-art.visual-poem { background: #e9e1d5; }
.demo-art.live-art, .demo-art.visual-live { background: #e5e7de; }
.demo-art.muse-art, .demo-art.visual-muse { background: #e6e6e5; }
.demo-art > img, .demo-motion-frame, .demo-art > video {
  display: block; flex: 0 1 auto; width: auto; height: 100%; max-width: 100%;
  max-height: 100%; object-fit: contain; padding: 0; border: 0; border-radius: 2px;
  transform: none; box-shadow: 0 7px 24px #393d2e15;
}
.demo-art:is(.tool-art,.tool-visual):hover > img { transform: none; }
.demo-motion-frame { aspect-ratio: 718 / 960; }
.demo-motion-frame video { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.demo-art .art-caption { position: absolute; left: 24px; bottom: 16px; margin: 0; color: #74776b; font: 10px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }
.project-hero .tool-visual.demo-art { width: 100%; max-width: 450px; height: auto; aspect-ratio: 3 / 4; justify-self: end; border-radius: 18px; }
.demo-live-badge { position: absolute; z-index: 2; top: 14px; left: 18px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid #fff9; border-radius: 20px; color: #56604e; background: #fafbf5e6; font: 9px/1.4 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: 1px; pointer-events: none; }
.demo-live-badge::before { content: "◎"; font-size: 14px; line-height: 1; }
.demo-live-toggle { position: absolute; z-index: 3; right: 18px; bottom: 11px; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 10px; border: 1px solid #b2b7a771; border-radius: 20px; color: #59654f; background: #fafbf5eb; font: 10px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; cursor: pointer; }
.demo-live-toggle::before { content: "▶"; font-size: 8px; }
.live-demo[data-playing="true"] .demo-live-toggle::before { content: "Ⅱ"; font-size: 10px; }
.demo-live-toggle:hover { background: #fff; }
.demo-live-toggle:focus-visible { outline: 2px solid #8f2634; outline-offset: 3px; }
.demo-live-toggle[hidden] { display: none; }
@media (max-width: 760px) {
  .tool-art.demo-art { height: clamp(350px, 100vw, 450px); padding: 24px 20px 44px; }
  .project-hero .tool-visual.demo-art { max-width: 100%; padding: 22px 20px 43px; }
  .demo-art .art-caption { left: 18px; font-size: 9px; }
}