.demo-page { max-width: 1100px; }
.demo-page h1 { margin: 0 0 0.75rem; }
.demo-page p, .demo-page li { line-height: 1.6; }
.demo-page .demo-notice { border-left: 5px solid #925600; }
.demo-card { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 1.5rem; align-items: start; }
.demo-card h2 { font-size: 1.3rem; }
.demo-card figure { margin: 0; text-align: center; }
.demo-card img { display: block; width: 200px; height: 200px; max-width: 100%; margin: 0 auto 0.5rem; }
.demo-card figcaption { font-size: 0.9rem; line-height: 1.4; }
.demo-card .demo-open { display: inline-flex; margin: 0.25rem 0 1rem; padding: 0.7rem 1rem; border: 2px solid #164f91; border-radius: 6px; color: #fff; background: #164f91; font-weight: 700; text-decoration: none; }
.demo-card .demo-open:hover { background: #103a6b; }
.demo-page a:focus-visible { outline: 3px solid #925600; outline-offset: 4px; }
.demo-file { overflow-wrap: anywhere; }
.demo-profiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.demo-profiles h3 { margin: 0 0 0.5rem; }
.demo-profiles code { display: inline-block; font-size: 1rem; user-select: all; padding: 0.4rem; border: 1px solid #27313f; border-radius: 4px; }
@media (max-width: 700px) {
  .demo-card, .demo-profiles { grid-template-columns: minmax(0, 1fr); }
  .demo-card figure { justify-self: start; max-width: 200px; }
}