.demo-ribbon{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;padding:16px 20px;margin-bottom:26px;border:1px solid var(--timber-line);background:linear-gradient(110deg,var(--timber-soft),var(--surface));border-radius:14px}.demo-ribbon b{display:block;font-size:14px;color:var(--timber);letter-spacing:.04em}.demo-ribbon span{display:block;font-size:12px;color:var(--muted);margin-top:3px}.demo-actions{display:flex;gap:8px;flex-wrap:wrap}.demo-help-link{background:none;text-align:left;border:1px solid #FFFFFF20;border-radius:9px;padding:10px;color:#B6C9E4;font-size:12px;cursor:pointer}.demo-guide{max-width:760px;width:calc(100% - 32px);max-height:88vh;overflow:auto}.demo-guide-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.demo-guide p{color:var(--ink-2);line-height:1.9}.demo-steps{padding-left:22px;margin:20px 0;display:grid;gap:14px;color:var(--ink-2);font-size:14px;line-height:1.85}.demo-steps b{display:block;color:var(--ink)}.demo-jumps{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}.demo-guide .callout{font-size:13px;margin-top:20px}.topbar-status .sync{color:var(--timber)}.topbar-status .sync .dot{background:var(--timber)}
@media(max-width:760px){.demo-ribbon{padding:14px;gap:12px}.demo-ribbon span{font-size:11px}.demo-actions{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.demo-actions .button{font-size:11px;padding:8px 6px}.demo-jumps .button{width:100%}.topbar-status .sync{font-size:11px}}