.demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #fff9f8; padding: 14px 24px; color: #69223b; font: 12px/1.5 system-ui, sans-serif; border-bottom: 1px solid #e7cdd5; }
.demo-bar a { color: #97052f; text-decoration: none; }
.demo-bar a:focus-visible, .demo-about a:focus-visible { outline: 3px solid #97052f; outline-offset: 5px; }
.demo-about { background: #fff7f5; color: #4b2b36; text-align: center; padding: 65px 24px; font: 16px/1.7 system-ui, sans-serif; }
.demo-about > span { font: 70px Georgia, serif; color: #97052f; }
.demo-about h2 { font: 34px/1.2 Georgia, serif; margin: 12px 0 20px; }
.demo-about p { max-width: 640px; margin: 12px auto; }
.demo-about a { display: inline-block; background: #97052f; color: white; padding: 12px 22px; margin-top: 20px; border-radius: 7px; text-decoration: none; }
@media (max-width: 600px) {
  .demo-bar { padding: 12px; flex-wrap: wrap; gap: 8px; font-size: 11px; }
  .demo-bar > span { order: 3; width: 100%; }
  .demo-about h2 { font-size: 29px; }
}