.demo-ribbon { background: #FFB612; color: #0A2540; font-size: .78rem; line-height: 1.2; padding: 5px 12px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; justify-content: center; text-align: center; }
.demo-ribbon a { color: #0A2540; font-weight: 700; text-decoration: underline; margin-left: 6px; }
.demo-toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); background: #0A2540; color: #fff; padding: 10px 16px; border-radius: 99px; font-weight: 700; font-size: .92rem; box-shadow: 0 6px 20px rgba(0,0,0,.28); z-index: 90; max-width: calc(100vw - 32px); text-align: center; }
.demo-toast[hidden], .demo-note[hidden] { display: none; }
.demo-note { display: inline-block; margin-left: 8px; color: #8a4b00; font-size: .85rem; font-weight: 700; }
.demo-form .demo-note { margin-top: 6px; }
.demo-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.demo-list a { display: block; padding: 10px 12px; background: #fff; border-radius: 12px; border: 1px solid #d7dee8; text-decoration: none; font-weight: 600; }
.demo-grid { display: grid; gap: 14px; }
@media (min-width: 760px) { .demo-grid { grid-template-columns: 1fr 1fr; } }
.demo-try { display: flex; flex-wrap: wrap; gap: 10px; }
.demo-gate .gate-form label { color: #fff; }
.gate-msg { color: #ffd0c4; font-weight: 700; }
.demo-talk { margin: 18px 0; }
@media print { .demo-ribbon, .demo-toast { display: none !important; } }
.btn.talk { background: #fff; color: #0A2540; border: 2px solid #0A2540; }
.demo-ribbon-sub { opacity: .9; }