.sample-bar{position:sticky;top:0;z-index:250;background:#10273b;border-bottom:1px solid #1ea7d7;display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:12px 22px;color:#eef9ff}.sample-bar>div{flex:1;min-width:180px}.sample-bar b,.sample-bar span{display:block}.sample-bar span{font-size:12px;color:#bed6e5;margin-top:4px}.sample-bar label{font-size:12px;display:grid;gap:3px}.sample-bar select{min-width:190px;margin:0;padding:7px}.sample-bar a.btn{text-decoration:none;display:inline-flex;align-items:center}.sample-exit{color:#c1deed}.sample-loading{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;background:#08111f;color:#fff;font:600 19px system-ui;padding:24px;text-align:center}.sample-guide{background:linear-gradient(125deg,#112f49,#091a2b);border:1px solid #245370;border-radius:16px;padding:20px;margin:0 0 20px}.sample-guide h3{margin:8px 0}.sample-guide p{color:#b8cede;line-height:1.6}.sample-guide-actions{display:flex;flex-wrap:wrap;gap:10px}.app-demo .appbar{top:0}.app-demo .demo-mode-only{display:block}@media(max-width:760px){.sample-bar{position:relative;padding:12px;gap:9px}.sample-bar>div{flex-basis:100%}.sample-bar .btn{font-size:12px;padding:9px}.sample-bar label{flex:1}.sample-guide{padding:14px}.sample-guide-actions{display:grid;grid-template-columns:1fr}.sample-guide-actions .btn{white-space:normal;text-align:left}.sample-exit{font-size:12px}}

@media(min-width:761px){body.app-demo:not(.login-view) .appbar{top:var(--sample-bar-height,83px);height:calc(100vh - var(--sample-bar-height,83px))}}