:root{--dev-bar-height:41px;--dev-nav-gap:28px}
html:has(body.development.modern){scroll-padding-top:calc(var(--dev-bar-height) + 125px)}
.dev-bar{position:sticky;top:0;z-index:1000;background:#f0c450;color:#252015;padding:10px 20px;font:600 13px/1.6 system-ui,sans-serif;text-align:center;overflow-wrap:anywhere}
.dev-bar a{color:inherit;text-decoration:underline;margin-left:15px}
.development.modern>header{top:calc(var(--dev-bar-height) + var(--dev-nav-gap))}
.development .app-layout,.development .auth-layout,.development .auth-brand{min-height:calc(100svh - var(--dev-bar-height))}
.development .sidebar{top:var(--dev-bar-height)}
@media(max-width:1100px){:root{--dev-nav-gap:25px}}
@media(max-width:760px){:root{--dev-nav-gap:20px}.dev-bar{font-size:11px}.development .sidebar{top:0}}