.public-demo{--demo-banner-height:58px;padding-top:var(--demo-banner-height)}
.demo-banner{position:fixed;inset:0 0 auto;z-index:30;min-height:var(--demo-banner-height);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:11px 24px;background:#e6edd8;color:#223a2c;border-bottom:1px solid #c9d6b7;box-sizing:border-box}
.demo-banner-copy{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;min-width:0;font-size:12px}
.demo-banner-copy strong{font-size:13px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.demo-banner-copy i{width:7px;height:7px;background:#63813b;border-radius:50%}
.demo-banner-copy small{font-size:11px;color:#59664e}
.demo-banner nav{display:flex;align-items:center;gap:15px;flex-shrink:0;font-size:12px}
.demo-banner a{text-decoration:underline;text-underline-offset:3px}
.demo-banner button{border:1px solid #a8b895;background:#f6f9ee;color:#223a2c;border-radius:5px;padding:7px 10px;font:inherit;cursor:pointer;white-space:nowrap}
.public-demo .shell{min-height:calc(100vh - var(--demo-banner-height))}
.public-demo .rail{top:var(--demo-banner-height)}
.public-demo .boot{min-height:calc(100vh - var(--demo-banner-height))}
.public-demo .ds-demo-note{border:1px solid #cad7ba;background:#eef4e4;color:#3e5431;border-radius:10px;padding:17px 21px;margin-bottom:24px;font-size:13px;line-height:1.6}
.public-demo .ds-demo-note strong{display:block;font-size:14px;margin-bottom:4px}
@media(max-width:900px){.demo-banner-copy small{display:none}.demo-banner{gap:12px}.demo-banner-copy{gap:5px 12px}}
@media(max-width:700px){.public-demo{--demo-banner-height:97px}.demo-banner{padding:10px 15px;display:block}.demo-banner-copy{display:block}.demo-banner-copy strong{margin-bottom:4px}.demo-banner nav{margin-top:8px;gap:18px;font-size:11px}.demo-banner button{padding:4px 8px}.public-demo .top-right .service{display:none}}