.demo-ribbon{position:sticky;top:0;z-index:60;display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;justify-content:center;padding:.4rem 1rem;background:#1d3b36;color:#f4f1ea;font-size:.85rem;line-height:1.3;text-align:center}
.demo-ribbon strong{font-weight:700}
.demo-ribbon form{display:inline;margin:0}
.demo-ribbon-btn{min-height:32px;padding:.2rem .8rem;border:1px solid #f4f1ea;border-radius:999px;background:#f4f1ea;color:#1d3b36;font:inherit;font-weight:600;cursor:pointer}
.demo-ribbon-btn.ghost{background:transparent;color:#f4f1ea}
.demo-landing{max-width:62rem;margin:0 auto}
.demo-landing .lead{font-size:1.1rem;max-width:44rem}
.demo-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:1rem;margin:1.5rem 0}
.demo-choice h2{margin-top:0}
.demo-list{margin:.5rem 0 1rem;padding-left:1.1rem}
.demo-landing .check{display:flex;gap:.5rem;align-items:center;min-height:44px}
.demo-tour{position:fixed;right:1rem;bottom:1rem;z-index:70;max-width:22rem;padding:1rem 1.1rem;border-radius:12px;background:#fffdf8;color:#1b1f1e;box-shadow:0 12px 32px rgba(0,0,0,.25);border:1px solid #d9d2c3}
.demo-tour h2{margin:.2rem 0 .4rem;font-size:1.05rem}
.demo-tour-step{margin:0;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:#5b6b66}
.demo-tour-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0 0}
@media (max-width:480px){.demo-tour{left:.75rem;right:.75rem;max-width:none}}
@media (prefers-color-scheme:dark){.demo-tour{background:#1f2624;color:#eef1ee;border-color:#36413d}.demo-tour-step{color:#9fb0aa}}