body { font-family: Arial, sans-serif; background:#f6f7fb; margin:0; }
main { max-width:900px; margin:0 auto; padding:16px; }
section { background:white; padding:12px; border-radius:8px; margin-bottom:12px; }
form { display:grid; gap:8px; }
input, button, select { padding:8px; font-size:14px; }
ul { padding-left:18px; }
pre { background:#111; color:#cde; padding:12px; overflow:auto; }
.inline-btn { margin-left:8px; }
.hidden { display: none; }

.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.22s ease;
}
.fade-slide-enter-from,
.fade-slide-leave-to {
  opacity: 0;
  transform: translateY(8px);
}

.fade-scale-enter-active,
.fade-scale-leave-active {
  transition: all 0.18s ease;
}
.fade-scale-enter-from,
.fade-scale-leave-to {
  opacity: 0;
  transform: scale(0.98);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.22s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.navbar-sticky-active {
  position: sticky;
  top: 0;
  z-index: 35;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border-radius: 0 0 16px 16px;
  backdrop-filter: saturate(160%) blur(6px);
}