:root{--demo-banner-height:56px}
.demo-banner{position:fixed;inset:0 0 auto;z-index:2000;height:var(--demo-banner-height);padding:8px 24px;background:#f5f5ef;color:#1c2b25;border-bottom:1px solid #d5dbd1;display:flex;align-items:center;justify-content:space-between;gap:24px;font:12.8px/1.6 Arial,'Microsoft JhengHei',sans-serif}
.demo-banner__text{display:flex;align-items:center;gap:16px}.demo-banner strong{font-size:12.8px;color:#345947;white-space:nowrap}.demo-banner p{margin:0;color:#56635b}.demo-banner a{color:#345947;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;font-weight:700;border:1px solid #d5dbd1;border-radius:8px;white-space:nowrap;text-decoration:none;transition:background-color 240ms ease-out}.demo-banner a:hover{background:#e7ecdf}.demo-banner a:focus-visible{outline:2px solid #345947;outline-offset:8px}
body.site-body.demo-context{padding-top:var(--demo-banner-height)}.site-body.demo-context .site-header{top:var(--demo-banner-height)}
body.tma-body.demo-context{padding-top:var(--demo-banner-height)}.demo-context .tma-frame{height:calc(100dvh - var(--demo-banner-height))}.demo-context .ov{top:var(--demo-banner-height)}
@media(min-width:500px){.demo-context .tma-frame{height:844px;max-height:calc(100dvh - var(--demo-banner-height) - 32px)}}
@media(max-width:799px){:root{--demo-banner-height:80px}.demo-banner{padding:8px 16px;gap:16px}.demo-banner__text{display:block}.demo-banner p{font-size:12.8px;max-width:48ch}.demo-banner a{padding:8px;white-space:normal;text-align:center;max-width:144px}}
@media(max-width:479px){:root{--demo-banner-height:96px}.demo-banner p{font-size:12.8px;line-height:1.5}.demo-banner__text{min-width:0}.demo-banner a{flex-shrink:0;max-width:104px}}
@media(prefers-reduced-motion:reduce){.demo-banner a{transition:none}}