:root{--bar-h:56px}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Lato,system-ui,sans-serif;background:#fff;color:#111;-webkit-font-smoothing:antialiased}
.topbar{position:sticky;top:0;z-index:100;height:var(--bar-h);background:#000;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 20px;gap:16px}
.topbar.overlay{position:absolute;left:0;right:0;background:linear-gradient(rgba(0,0,0,.45),transparent)}
.brand{color:#fff;text-decoration:none;font-size:16px;font-weight:700;white-space:nowrap}
.mainnav{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none}
.mainnav::-webkit-scrollbar{display:none}
.mainnav a{color:#fff;text-decoration:none;font-size:13px;padding:8px 10px;border-radius:4px;white-space:nowrap}
.mainnav a:hover{background:rgba(255,255,255,.12)}
.mainnav a.active{font-weight:700;box-shadow:inset 0 -2px 0 #fff}
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:#fff;margin:4px 0}
@media (max-width:900px){
  .burger{display:block}
  .mainnav{display:none;position:fixed;top:var(--bar-h);left:0;right:0;bottom:0;background:#000;flex-direction:column;align-items:stretch;padding:8px 12px 40px;overflow:auto}
  body.nav-open .mainnav{display:flex}
  .mainnav a{font-size:16px;padding:13px 12px}
  .mainnav a.active{box-shadow:none;background:rgba(255,255,255,.1)}
}
.appframe{display:block;width:100%;border:0;height:calc(100vh - var(--bar-h));height:calc(100dvh - var(--bar-h))}
.topbar{background:#fff;color:#111;border-bottom:1px solid #eee}.brand,.mainnav a{color:#111}.mainnav a:hover{background:#f2f2f2}.mainnav a.active{box-shadow:inset 0 -2px 0 #111}.burger span{background:#111}@media (max-width:900px){.mainnav{background:#fff}}