#menuDrawer {
  margin: 0 auto 0 0;
  height: 100dvh;
  max-height: 100dvh;
  width: min(340px, 92vw);
}
#menuDrawer[open] {
  animation: drawer-slide-in 480ms cubic-bezier(.16,1,.3,1) both;
  border-color: color-mix(in srgb,var(--accent) 24%,#ffffff18);
  box-shadow: 18px 0 65px #00000066, 1px 0 18px color-mix(in srgb,var(--accent) 12%,transparent);
}
#menuDrawer.closing {
  animation: drawer-slide-out 420ms cubic-bezier(.4,0,.2,1) both;
}
#menuDrawer::backdrop { background:#01040a55; backdrop-filter:blur(1px); }
@keyframes drawer-slide-in {
  from { opacity:0; transform:translateX(-100%); }
  to { opacity:1; transform:translateX(0); }
}
@keyframes drawer-slide-out {
  from { opacity:1; transform:translateX(0); }
  to { opacity:0; transform:translateX(-100%); }
}
@media (max-width:700px) {
  body { --drawer-push:min(340px,82vw); }
  #menuDrawer { width:var(--drawer-push); }
  body:has(#menuDrawer[open]) { overflow-x:clip; }
  body #app {
    transform-origin:right center;
    transition:transform 480ms cubic-bezier(.16,1,.3,1),filter 480ms ease;
  }
  body:has(#menuDrawer[open]:not(.closing)) #app {
    transform:translateX(var(--drawer-push)) scale(.975);
    filter:brightness(.75);
  }
  body:has(#menuDrawer.closing) #app { transition-duration:420ms; }
}
@media (prefers-reduced-motion:reduce) {
  #menuDrawer[open],#menuDrawer.closing { animation:none; }
  body #app { transition:none; }
}
.drawer {
  min-height: 100%;
  border-radius: 0 22px 22px 0;
  padding: 22px;
}
.drawer h2 {
  font:
    600 25px Georgia,
    serif;
}
.drawer small {
  font: 700 10px system-ui;
  color: #71c5ff;
}
.drawer nav {
  display: grid;
  gap: 5px;
}
.drawer nav a,
.drawer nav button {
  padding: 12px;
  text-align: left;
  text-decoration: none;
  color: var(--ink);
  font-size: 14px;
  border: 0;
  background: none;
}
.drawer nav a:hover,
.drawer nav button:hover {
  background: #ffffff09;
  border-radius: 12px;
}
.drawer h3 {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--muted);
  margin-top: 28px;
}
.session-row {
  display: flex;
  gap: 5px;
  margin: 6px 0;
}
.session-row button:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  padding: 10px;
}
.session-row.selected button:first-child {
  border-color: var(--accent);
  background: #38a7ff12;
}
.session-row button:last-child {
  padding: 8px;
}