/* Demo mode: a strip that is always visible, in both themes. */
#demo-bar,.pt-demo{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px;padding:8px 16px;background:#f5b400;color:#231a00;font-size:13.5px;line-height:1.35;box-shadow:0 2px 10px #0003}
#demo-bar b,.pt-demo b{letter-spacing:.06em}
.demo-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.demo-actions a,.demo-actions button{font:inherit;font-weight:700;color:#231a00;background:#fff3c4;border:1px solid #231a0040;border-radius:999px;padding:5px 12px;min-height:0;cursor:pointer;text-decoration:none}
.demo-actions a:hover,.demo-actions button:hover{background:#fff}
.demo-entry{margin-top:18px;padding-top:14px;border-top:1px solid #8884}
.demo-entry summary{cursor:pointer;font-weight:700}
.demo-entry form{display:grid;gap:10px;margin-top:10px}
/* The strip is fixed at the top; the page and the fixed sidebar start below it (height measured in demo.js). */
#demo-bar{position:fixed;left:0;right:0}
body.demo-mode{padding-top:var(--demo-h,44px)}
body.demo-mode aside{top:var(--demo-h,44px)}
@media(max-width:900px){body.demo-mode aside{top:0}}
#demo-bar .demo-actions a{color:#231a00}