body>aside{transition:transform .22s ease,box-shadow .22s ease}
.app{transition:margin-left .22s ease}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;font-size:20px;flex:0 0 auto}
.sidebar-close{display:none;position:absolute;top:16px;right:13px;width:38px;height:38px;padding:0;border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font-size:24px;line-height:1;z-index:2}
.sidebar-backdrop{display:none;position:fixed;inset:0;border:0;border-radius:0;padding:0;background:rgba(10,25,43,.52);backdrop-filter:blur(2px);z-index:4}
body.sidebar-collapsed>aside{transform:translateX(calc(-100% - 24px));box-shadow:none}
body.sidebar-collapsed>.app{margin-left:0!important}
@media(max-width:650px){
  body.sidebar-collapsed>aside{transform:translateX(calc(-100% - 24px));box-shadow:none}
  body.sidebar-collapsed>.app{margin-left:0!important}
  body.menu-open>aside{transform:translateX(0)}
  body.menu-open{overflow:hidden}
  body.menu-open>.sidebar-backdrop{display:block}
  .sidebar-close{display:inline-flex;align-items:center;justify-content:center}
  .iconbtn{display:inline-flex}
}
@media(prefers-reduced-motion:reduce){body>aside,.app{transition:none}}
@media print{.sidebar-backdrop{display:none!important}}