/* Thin bar above every template demo: which template this is, and how to choose it. Not part of the template. */
.demo-bar { position: relative; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; padding: .35rem 1rem; background: #0b1424; color: #d6deea; font: 500 13px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; }
.demo-bar a { color: inherit; text-decoration: none; }
.demo-bar-info { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.demo-bar-info strong { color: #fff; font-weight: 600; white-space: nowrap; }
.demo-bar-info span { overflow: hidden; color: #9fb0c8; text-overflow: ellipsis; white-space: nowrap; }
.demo-bar-actions { display: flex; flex-shrink: 0; align-items: center; gap: .9rem; }
.demo-bar-actions a:hover, .demo-bar-actions a:focus-visible { color: #fff; text-decoration: underline; }
.demo-bar .demo-bar-choose { padding: .4rem .85rem; border-radius: 999px; background: #2d6af6; color: #fff; font-weight: 600; }
.demo-bar .demo-bar-choose:hover, .demo-bar .demo-bar-choose:focus-visible { background: #4c87ff; text-decoration: none; }
@media (max-width: 640px) { .demo-bar-info span, .demo-bar-back { display: none; } }
.demo-note { position: fixed; left: 50%; bottom: 1.25rem; z-index: 101; max-width: min(420px, calc(100% - 2rem)); padding: .8rem 1rem; border-radius: 12px; background: #0b1424; color: #fff; font: 14px/1.45 system-ui, sans-serif; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); transform: translateX(-50%); }